SCSSとは?
SCSSは、CSSに演算機能や変数、ネストなどを用いることで、より効率的に書けるようにした、Sassの記法の1種です。
Sassには、SASS記法とSCSS記法があります。
SASS記法では中かっこを使用しないので、可読性やCSSとの互換性と引き換えに、より短く書くことができます。
SCSS記法ではCSSと同様に中括弧{}を使用するため、SASS記法と比べて見た目がCSSに近くなり、可読性が高まったりCSSを混ぜて記述することができるといったメリットがありますが、少しだけコードが長くなります。
コンパイルの方法
ブラウザはHTML、CSS、JavaScript以外の言語を読み込むことができないので、拡張子が.scssのSCSSは事前にCSSに変換してあげる必要があります。このSCSSからCSSに変換する作業のことをコンパイルと言います。
コンパイルの仕方はいくつかありますが、ここでは4つの方法を紹介します。
①専用のサイトを使用する方法
SassをCSSに変換してくれる、Sass Meisterというサイトがあります。
このサイトでは、下の写真のようにSassで書いたコードを自動でCSSにコンパイルしてくれるので環境構築も必要なく、とりあえず試してみたい学習者に適しています。
②Rubyを使う方法
この方法は、自身のパソコンにRubyをインストールしている必要があります。
Macを使用している方はデフォルトでRubyが入っているので問題ありませんが、Windowsを使用している方はセットアップが必要です。
Windowsを使用している方はこちらからダウンロードした後、画面に従ってインストールを行ってください。
----------------ここからはMac、Windows共通で行う必要があります。-------------------------
ターミナル(コマンドプロンプト)を起動して、以下のコマンドを打ち込んでください。
$gem install sass
これでインストールに成功すれば準備完了です。
SCSSを記述しているファイルがあるディレクトリに移動して以下のコマンドを実行してください。
$sass qiita.scss:qiita.css
ファイル名は適宜変更してください。
コロンの前が元のSCSSファイル名、後が生成されるCSSファイルの名前になります。
これだけです。
これを実行すると、SCSSがあったディレクトリにCSSファイルが新たに生成されます。
このコマンドには実行時にオプションを付けることができます。
①圧縮オプション
$sass qiita.scss:qiita.css --style compressed
これを実行すると改行がない圧縮された状態で出力されるので、可読性の低下と引き換えにサイトの表示を早めることができます。
基本的にスタイルシートはSCSSを使って管理することになると思うので、CSSファイルの可読性の低さはあまり問題にはならないと思います。
②監視オプション
$sass --watch qiita.scss:qiita.css
開発途中で毎回コマンドを実行するのはあまりにも効率が悪いです。
このコマンドを実行すると、SCSSファイルの変更を検知して、その部分をCSSファイルに自動で反映してくれます。
開発中は基本的にこれを使うことになると思います。
GUIソフトを使用する方法
Sassには、コンパイルするためのGUIソフトが用意されています。
よく使われるのは、PreprosとKoalaです。
Prepros
Koala
PreprosもKoalaも使い方はほとんど同じです。
ファイルをドラッグして、コンパイルしたいファイルを選択、Preprosなら右下のProcess Fileを、KoalaならConpileをクリックすれば終わりです。
VSCodeを使用する方法
エディタであるVSCodeでも、拡張機能を使用することでコンパイルが可能です。
Live Sass Compilerという拡張機能をインストールして有効化すると画面の右下にWatch Sassというボタンが表示されます。
これをクリックすると、自動でSassのコンパイルが始まり、変更があればその都度CSSファイルに反映してくれます。
まとめ
長くなりましたが、これでSCSS(正確にはSASSも)を使う準備ができました。
実際にSCSSを書く時の記法はこちらをご覧ください。