元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【Sass】Sassを始める・試す

とあるSVGを自分のPCで表示したかったのですが、SCSSを使っていたのでそのままでは表示されませんでした。SCSSをCSSに変換する必要があるということなので、Sassについて調べました。この記事では、Sassについて調べた内容と始め方について簡単に書きます。

Sass使用の流れ

Sassは、CSSをより便利に簡潔に記述できるようにしたものです。詳細は、他のサイトに譲ります。

Sass使用の流れは、以下のようになります。

  • SASS記法orSCSS記法で記述したファイルを作る(sample.sass, sample.scss)
  • ファイルをCSSファイルにコンパイルする

コンパイルする前のファイルは、HTMLに反映されません。

Sassの記法

Sassには、2種類の記法があります。SASS記法とSCSS記法です。基本的な記法についての説明は省きます。2つの記法の差異についてのみ簡単に書きます。

  • SASS記法

    • {の代わりにインデントを使う
    • ;がない
    • 通常のCSSの記述ができない
  • SCSS記法

    • {がある
    • ;がある
    • 通常のCSSの記述ができる

SCSSの導入

通常のCSSと互換性があるということなので、SCSSを導入します。今回、Rubyruby-sassパッケージを使ってみます。

ruby-sassのインストール

sudo apt install ruby-sass

以下のコマンドでSCSSをCSSコンパイルします。ファイル名は、適宜変更してください。

sass style.scss style.css

Sassを気軽に試す

SassMeisterというサイトで、SCSSの記法を試せます。自分のPCで環境を作るのが難しい場合や試してみたいだけの場合は、こちらのサイトを使うと良いです。

感想

昨今、Sassという便利なものが使われているということを知りました。無事、SCSSをコンパイルしてSVGを表示することができました。

参考サイト

補足

本記事で紹介したruby-sassパッケージは、2019年3月にサポートが終了*1したそうです。Ruby Sass公式サイトでは、代わりにDart Sassを推奨しています。