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で見出し作成
さっそくスタイルを指定していきましょう。
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（SCSS）ファイルを、別のSass（SCSS）ファイルに読み込むときは「@use」「@forward」を使います。
@use "directory/file"; @forward "directory/file";
これらの機能を使い分けるコツは、「複数」のファイルを「間接的に」読み込ませるかどうか。
例えば、色やフォントなどの共通スタイルを、全てのファイルで利用したい！というケースが考えられます。
もし一括でまとめるなら、別途、ファイル群を管理するファイルを用意して「@forward」で読み込みます。
@forward "foundation/color"; @forward "foundation/font"; @forward "foundation/mixin";
反対に、個別なら、経由する管理ファイルは作らずに、各ファイルで「@use」を使って読み込みます。
@use "foundation/color" @use "foundation/font"; @use "foundation/mixin";
最終的に、「@use」「@forward」で読み込んだファイルは、以下手順で呼び出してスタイル指定していきます。
- 各ファイルの上部に「@use」をつけて、呼び出し元のファイルパスを書く
- 変数、@mixinの前に呼び出し元の「ファイル名」もしくは「名前空間」をつける
このとき、独自の名前（名前空間）を1文字から指定できるので、ファイル名の省略などに活かすのもアリ。
// 一括で読み込んだ場合の書き方 @use "foundation/common" as c; color: c.$color-bk font-size: c.$font-large; @include c.pc;
// 個別で読み込んだ場合の書き方 @use "foundation/color" as cl; @use "foundation/font" as ft; @use "foundation/breakpoint" as bp; color: cl.$color-bk font-size: ft.$font-large; @include bp.pc;
見比べてみると、各ファイルを手動で読み込むよりも一定数まとまっている方が見通しがいいことが分かります。
どちらにするかは、状況次第になりますが、長い目で見れば「@forward」の方が現実的です。
「ファイル名」で指定するときは、color: color.$color-bkのように使います。
役割ごとにスタイルシートを分割して、情報を整理できるところがこの機能最大のメリット。
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」は、カッコやセミコロンを使わずに、インデントや記号で表記する記法。