CSSに慣れてきたら「Sass（サス）」（＝SCSS）をコーディングに取り入れてみましょう。
実務でよく使われる言語ですが、人気の理由はそのメンテナンス性の高さと作業効率の良さ。
プログラミングでおなじみの「変数」や「@mixin」などの独自機能で指定すれば、同じデータを繰り返し利用できます。
スタイルを共通化することで情報も整理されるので、あとで修正しやすいというメリットも。
最終的にはCSSに変換するため、見た目としては変わりませんが、コード量は明らかにSassの方が少ないんですよね。
サイトを長期運用し、何千、何万のコードに対応するなら、早い段階での導入がおすすめ。
目次
Sass（SCSS）とは
Sassは「Syntactically Awesome StyleSheet」の略。構文的に素晴らしいスタイルシートと直訳できます。
どこに何が書いてあるかが把握しやすく、可読性、メンテナンス性に優れているのが特長です。
分類としては「CSSプリプロセッサ」というメタ言語に区分されるため、プログラミングのような書き方でコーディングしていきます。
Sassの場合は、2種類の記法があり、拡張子はそれぞれ「.sass」「.scss」に分かれています。
「.scss」は、CSSの書き方が使える記法。同じセレクタの要素にスタイル指定するときは「入れ子」にして記述を省略することもできます。
このため、HTMLなどに読み込ませるときは、CSSファイルに「コンパイル（変換）」してから適用しなければいけません。
今回は、現在主流の「.scss」記法で作成し、専用ツールでコンパイルするところまでを解説。
SCSSの環境構築
Visual Studio Code
「Sass」の拡張機能を使うので、使うエディタは「Visual Studio Code」にします。
公式サイトからインストーラをダウンロード。
ファイルを作成
インストールが終わったら、HTML、SCSSの拡張子でファイルを作成します。
こちらがサンプルのHTMLコード。入力後はCtrl+Sなどで保存してください。
<body>
<div class="headline">
<h2>見出し1</h2>
<h2>見出し2</h2>
</div>
</body>
SCSSファイルには何も書かなくてOKです。
DartJS Sass Compiler
左メニューから拡張機能アイコンをクリック。
「DartJS」と入力し、以下のツールが出てきたら「インストール」します。
インストールが終わったら、こちらのページは×で閉じてください。
この拡張機能が入った状態でSCSSを保存すると.css、圧縮された.min.css、.mapが自動で作成されます。
ソースマップ（.map）があると、Sassの何行目でスタイルを指定したかがデベロッパーツールで分かります。
SCSSで見出し作成
さっそくスタイルを指定していきましょう。
SCSSを使って、以下の条件で見出しを作成します。ここではイメージがつかめればOK。
- 見出しは
h2 - 文字色は
#222222の黒 - フォントは
游ゴシック - 見出しの背景色は
#f5f5f5のグレー - 見出しの内側に上下左右
16pxの余白 - 見出しの左側に、幅
8pxの縦border borderの色は#00008bの青
SCSSのコードはこちらです。
以下は一例なので、必ずしも同じクラス、書き方になる必要はありません。
/* --- common --- */
$font-color: #222222;
$font-family: "游ゴシック";
/* --- parts --- */
@mixin block{
padding: 16px;
border-left: solid 8px #00008b;
background-color: #f5f5f5;
}
/* --- headline --- */
.headline{
h2{
color: $font-color;
font-family: $font-family;
@include block;
}
}
ブラウザで確認すると、このようになります。
SCSSの便利機能
見出しのサンプルコードを元に解説していきます。
変数
例で指定した$font-color: xx;、$font-family: xx;が「変数」にあたります。
$font-color: #222222; $font-family: "游ゴシック";
サイトの「色」「フォント」「サイズ」などのデータを任意の「変数名」に入れて、スタイルを共通化するのが主な役割。
構成としては「変数名」と「値」2つの要素からできていて、以下のような流れで作ります。
- 頭文字に「$（ドル）」をつけて、任意の文字列で「変数名」を作成
- 「:（コロン）」で挟んだあとに、プロパティの値を代入
- 最後に「;（セミコロン）」をつける
使うときは、プロパティの値に$変数名をそのまま入れるだけ。コンパイルすれば自動で変換されます。
.headline{
h2{
color: $font-color;
font-family: $font-family;
}
}
これにより、大元を一か所書き換えるだけで、$変数名を入れたところが一度に変更できるので、修正にも強くなります。
@mixinと@include
例の@mixin block {xx}がスタイルを定義している「関数」のような部分です。
@mixin block{
padding: 16px;
border-left: solid 8px #00008b;
background-color: #f5f5f5;
}
「@mixin」は「ボタン」や「見出し」など、何度も使うスタイルをまとめて指定し、再利用するための便利機能。
定義した「@mixin」のCSSは「@include」で呼び出すことでセレクタに適用していきます。
.headline{
h2{
@include block;
}
}
ちなみに書き方はどちらも変数とは異なり、スペースを挟んで任意の名前をつける形式です。
@mixin block{}
@include block;
「@mixin」で部品化するシステムを利用すれば、色違いなど類似のスタイルを横展開するのかなりラク。
一部のスタイルを流用しながら上書きする「@extend」の方法なら時間短縮にもなりますよ。
「@extend」は「@mixin」の内容を「継承」した上で、CSSを追記する手法です。
@useと@forward
今回は触れていませんが、Sassファイルを読み込むときは「@use」「@forward」を使います。
@use "directory/file"; @forward "directory/file";
2つの違いは、読み込んだファイルを通して他のファイルを参照するかどうか。参照の場合は、前に「@forward」を指定します。
また、長いファイル名の要約などに「名前空間」という独自の名前をつけると、記述ミス防止にもつながります。
@use "directory/file" as name;
パスをダブルクォーテーションで囲むのを忘れずに！
外部にある変数や@mixinを使うときは、呼び出し元の「ファイル名」を指定してから変数名を入れてください。
font-size: file.$font-large; // 名前空間なし font-size: name.$font-large; // 名前空間あり @include name.button; // 名前空間あり
役割ごとにスタイルシートを分割して、情報を整理できるところがこの機能のメリット。
1ファイルあたりの記述量も減るので、エラーが発生したときに原因を見つけやすくなります。
今まで使われていた「@import」は、2022年10月にサポートを終了します。
コンパイル用ツール
Sass（SCSS）での制作に欠かせないのが、コンパイルツール。
どれも視覚的に分かりやすいエディタのような操作画面で、初心者にも優しいソフトです。
Koala
「Koala」は、Sass（SCSS）の入ったフォルダをドラッグ&ドロップするだけでコンパイルできる、フリーの専用ツールです。
自動コンパイルを設定すれば、DartJS Sassのように保存するたびにCSSを生成してくれます。
Prepros
「Prepros」も同じくフリーのコンパイラ。Sass（SCSS）を入れたフォルダのドラッグ&ドロップでコンパイル完了です。
ローカルサーバーを立ち上げることもできるので、端末チェックなど広い用途で使えるツール。
Sass Meister
「Sass Meister」は、は、オンラインのコンパイルツール。左の画面にSass（SCSS）で記述すると、右の画面にCSSで出力されます。
「View」にあるHTMLにチェックを入れると、プレビューを見ながら書くこともできますよ。
おわりに
今回ご紹介した「DartJS Sass」などのフリーコンパイラは、Sass導入初期におすすめです。
慣れてきたらエディタに依存しない「Gulp」などのタスクランナーを検討してみてください。
こちらはコマンドを使いますが、コンパイルしながら画像圧縮するような複数処理が一気にできる優れもの。
ツールを開いて、切り替えて・・・という手間がないので、開発スピードも自然と上がります。
Sassと相性のいい「BEM」の書き方を組み合わせると、よりメンテナンス性の高いコードになりますよ。
「.sass」は、カッコやセミコロンを使わずに、インデントや記号で表記する記法。