【Sass】Sassを始める・試す

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

Sass使用の流れ

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

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

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

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

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

sudo apt install ruby-sass

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

sass style.scss style.css

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

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

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