CSSをそのまま書くのがつらくなったら（Sass）

「CSSの書き方」でCSSの書き方を覚えました。最初のうちは快適です。ところがページが増えてくると、「同じことを何度も書いている」「直したい場所が見つからない」と、だんだんつらくなってきます。

そのつらさを解消するために生まれたのが Sass です。いきなり書き方から入るとただの暗記になってしまうので、まず「なぜ必要になるのか」から始めます。

1. ピュアなCSSの限界

CSSを書き続けると、だいたい次の3つの壁にぶつかります。

同じ値をあちこちに書く

.button      { background: #3b82f6; }
.link        { color: #3b82f6; }
.badge       { border: 1px solid #3b82f6; }

ブランドカラーを少し変えたい、と言われた瞬間に、ファイル中の #3b82f6 を探し回ることになります。1つ見落とせば、そこだけ古い色のまま残ります。

セレクタが長く深くなる

.card .card-header .title { font-size: 20px; }
.card .card-header .subtitle { color: #666; }
.card .card-body p { line-height: 1.8; }

同じ .card .card-header を何度も書くことになり、書くのも読むのも大変です。

1つのファイルが巨大になる

数百行のCSSから目的の場所を探すのは、それだけで一仕事です。

Sassは、CSSを書きやすく拡張した言語です。ピュアなCSSにできることは全部でき、そのうえで次のことができます。

変数 ― 値に名前を付けて使い回します。1か所直せば全部変わります。

$primary: #3b82f6;

.button { background: $primary; }
.link   { color: $primary; }

ネスト ― 入れ子で書けるので、セレクタの重複が消えます。

.card {
  .card-header {
    .title    { font-size: 20px; }
    .subtitle { color: #666; }
  }
}

@mixin ― よく使うスタイルのまとまりを部品にして、呼び出せます。

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero { @include center; }

@use によるファイル分割 ― 巨大な1ファイルを役割ごとに分け、必要なものだけ読み込みます。

@use "variables";
@use "header";
@use "card";

どれも「同じことを二度書かない」「探せるようにする」ための道具だと分かると思います。

ここがこの記事でいちばん大事なところです。ブラウザーはSassをそのまま理解できません。

ブラウザーが読めるのは、あくまで普通のCSSだけです。そのため、書いたSassを変換して普通のCSSにしてから配ります。この変換のことをコンパイルと呼びます。

style.scss   （書く用のファイル）
    ↓ コンパイル
style.css    （配る用のファイル。サーバーに置くのはこちら）

つまり、書くファイルと配るファイルが別物になるということです。これは「実際にデプロイしてみる」で触れた「ビルドしたファイルを置く」という話と同じことを指しています。

慣れないうちは、Sassを直したのに画面が変わらない、ということが必ず起きます。たいていはコンパイルを忘れているだけです。変換していないのだから、配られているCSSは古いままなのが道理です。

なお、この「書いたものを変換してから配る」という形は、次の記事のTypeScriptでもまったく同じ形で出てきます。2つを並べて読むと、変換という考え方が一気に腑に落ちます。

Sassのほかにも、CSSを支える道具があります。名前を知っておくと、人の話についていけます。

名前	何をするもの
PostCSS	CSSを変換・補完するツール。古いブラウザー向けの書き足しなどを自動でやってくれる
Tailwind CSS	あらかじめ用意された小さなクラスを組み合わせて書くアプローチ。CSSファイルをほとんど書かずに済ませる

考え方は違いますが、「素のCSSをそのまま書き続けるのはつらい」という出発点は同じです。