私はWEB制作会社に転職した際、一番最初に思ったことは『CSSぐちゃぐちゃやん！』でした。
これには様々な原因があると思います。

• 社内のルールが作られていなかった
• CSSの汚染が考慮されていなかった
• 当時の担当者のCSSの習熟度が低かった
• CSSのエラーを検出できないエディタを利用していた
• 長期運用する中で、徐々に混迷を極めていった

しかし、そもそもCSSってぐちゃぐちゃになりやすい、汚染されやすい構造になっていますよね。
私はとにかくこの状況から早く脱出したかった。
人が作ったぐちゃぐちゃなコードをちょこちょこ書き換えて、その場しのぎで見た目さえ整っていればOKで済ます毎日に、早くおさらばしたかった。

そこで、私は「WEB業界の人たちみんながこんなローテクな方法で地道にホームページ作っているわけがない」と思って調べたら、ありましたよ。

SASS/SCSSでCSSを構造化出来るぞ

SASS/SCSSは拡張メタ言語っていうらしいです。
SASS/SCSSはCSSをちょっとプログラムチックにした『記法』であって、これ自体をブラウザが読み取れるものではなく、結局はコンバーターでCSSに変換してあげる必要があります。
イメージ的にはC言語とかのコンパイラ型言語で、記述したソースコードは実行できないけど、コンパイラで実行ファイルに変換すると見れるようになるイメージです。

学生の方は「わざわざコンバーターでCSSに戻さなきゃいけないんだったら、手間増えるだけじゃね？」って思うかもしれませんが、SASS/SCSSの時の可読性が段違いなんです。
この可読性こそが長期間保守・運用していくホームページにとってとても大切なことなんです。

ちなみに、さっきからSASS/SCSSって記述していますが、SASSとSCSSはそれぞれが若干異なる記法です。
SCSSの方が元のCSSに近いので、私はSCSSを愛用しています。

SASS/SCSSはCSSと何が違うのか

ネスト構造に出来る

#wrapper .content ul.service_menu {
    display: block;
    box-sizing: border-box;
}
#wrapper .content ul.service_menu > li {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
}

#wrapper .content {
    ul.service_menu {
        display: block;
        box-sizing: border-box;

        > li {
            display: inline-block;
            width: 25%;
            box-sizing: border-box;
        }
    }
}

もうこれが一番うれしかった！
CSSではそれぞれ子孫セレクタなどを全て書いていたが、SASS/SCSSになるとこれをネストで表現することが出来る。
これは、HTMLのネスト構造とCSSのネスト構造が、少し近くなり、記述位置がだいたい固定化されるため、サイト全体のCSSの構造が明確化する。
だから、他人が書いたコードでも各段に読みやすくなるというわけ。

さらにBEMでの記述もとてもしやすくなるメリットがある。

.btn {
    display: block;
    padding: 10px;

    border-radius: 10px;
}
.btn.btn--red {
    color: red;
    border: 1px solid red;
}
.btn.btn--blue {
    color: blue;
    border: 1px solid blue;
}

.btn {
    display: block;
    padding: 10px;

    border-radius: 10px;

    &--red {
        color: red;
        border: 1px solid red;
    }
    &--blue {
        color: blue;
        border: 1px solid blue;
    }
}

行数自体は増えているものの、書き直すコード量が減り、構造が明確化することのメリットは計り知れない

変数が使える

h1 {
    color: #123456;
    border-bottom: 1px solid #123456;
}
h2 {
    color: #123456;
    border-left: 5px solid #123456;
}

$theme_color: #123456; // 変数
h1 {
    color: $theme_color;
    border-bottom: 1px solid $theme_color;
}
h2 {
    color: $theme_color;
    border-left: 5px solid $theme_color;
}

これもありがたかった。
変数でなくても、何度も出てくるサイトのテーマカラーなどを毎回記述していると、あとで色が変わった時など、設定を変更するのがとてもめんどくさかった。
これがあるだけで、1か所書き換えるだけで全箇所の設定を変えられることのありがたさと言ったらないね。

スタイルをテンプレート化出来る！

mixinという機能を使って、小さなテンプレートを作ることが出来ます。
簡単にいうと関数みたいなもんです。

h2.ttl {
    color: black;
    background: #678;
}
a.btn {
    color: #555;
    background: transparent;
}

@mixin color_set($color: #555, $bg_color: transparent) {
    color: $color;
    background: $bg_color;
}
h2.ttl {
    // 引数に値をセットして使います。
    @include color_set(black, #678);
}
a.btn {
    // 指定しない場合、デフォルト値が適応されます。
    @include color_set();
}

上記の例では明らかにSCSSの方が記述量が増えていますが、これが何個も何個も積み重なると逆転してくるんですね。
そして、中の要素を1か所で管理できるという点が尚良いです。
しかし、高度過ぎて私はまだ使いこなせていません・・・

条件分岐や繰り返し処理が出来る

出来るらしいが、未だ使ったことはない！

これらの便利機能はSASS/SCSSからCSSに変換される時に、全てコード上に展開されます。
そのため、この便利機能を使ったからといって、ホームページの読み込み速度が早くなるとか、そういった類のものではありません。
あくまで、開発がはかどるだけで、出来上がったものは『ただのCSS』なのです。

SASS/SCSSを使うには

ここまで説明してきたSASS/SCSSですが、実際に使うにはどうしたら良いか

SASS/SCSSを使うために必要な物

• コンバーター

必要という点で言えば、コンバーターさえあれば、大丈夫です。
このコンバーターはいくつかあります。
私はWindowsなので、Preprosというツールを使用してます。

SASS/SCSSを使うためにあった方が良い物

• SASS/SCSSに対応したエディタ

普通のテキストエディタでも大丈夫ですが、やはり適切にハイライトされるエディタの方が記述しやすいですし、デバッグもしてくれる方がエラーも防ぐことができますよね。

既にCSSで書き始めてしまった

でも大丈夫！
CSS 2 SASS/SCSSというツールがあるんです。

このCSS 2 SASS/SCSSは名前の通り、CSSをSASS/SCSSに変換してくれるツールです。
元のCSSがぐちゃぐちゃだと変換した時におかしくなることがあるので、注意してください。

ぜひ専門学生にもSASS/SCSSを教えてあげてほしい。
これを知っていると卒業制作が一体どれほど楽になることか・・・