SCSS入門

１．SCSSとは？

CSSと同様に、ブロック文「｛・・・｝」を使ってウェブページのスタイルを指定するCSSの拡張版です。

CSSはコーディングを進めるにつれて、肥大化し複雑になってメンテナンスが難しくなってくるため、効率的に読みやすくメンテナンスしやすいコードを「SCSS」で書くことができます。

SASSとSCSSの違い

似た書き方に「SASS」というものがあります。
SCSSは、このSASSがCSSとの互換性が十分ではなかったため開発されたものであり、そのためSCSSがデフィクトスタンダードになっているため、SCSSを覚える方がこの先の開発に便利だと思われます。

この２つは拡張子が異なり、SCSSが「.scss」、SASSが「.sass」です。

２．SCSSを使用するにはコンパイルが必要

SCSSのコードを使用するためには、SCSSをCSSにコンパイル（変換）してくれるコンパイラーが必要です。

コンパイルするやり方は、下記の２通りあります。

Prepros

SCSSをCSSに変換するGUIコンパイラです。
コンパイル以外にも便利機能が搭載されていますが、無料版は広告が表示されるため、あまりお勧めしません。

Visual Studio Code の Live Sass Compiler

Visual Studio Code はコードエディターなので、単体ではSCSSのコンパイルは出来ませんが、コンパイルを行ってくれる「Live Scss Compiler」というプラグインを入れることが可能です。

このプラグインを使用することで、SCSSファイルの保存と同時にCSSファイルを作成してくれます。

３．SCSSのメリット

変数（variables）

SCSSでは変数が使用できます。
繰り返し使うような値を変数に格納しておけば、メンテナンス時に変更したい箇所が出て来た時に、少ない作業量で済みます。

＜例＞SCSSを使って、文字の色を変えてみます

$moji-color : red;
p { color : $moji-color; }
h1 { color : $moji-color; }

ネスティング（nesting）

ネスト（階層化構造）を利用できます。

ネストを使用することで、CSSの全体の記述量を減らすことが出来たり、htmlファイルの構造をイメージしやすくなったりするため、可読性があがりメンテナンスのしやすいコードになります。

sample {
    p { color : red; }
    h1 { color : red; }
}

これはCSSにコンパイルすると、下記のようになります。

sample p { color : red; }
sample h1 { color : red; }

ミックスイン（mixins）

「＠mixin」を使うことによって、修正作業の効率化を図ることができます。
@mixinでコードの塊を作成し、別の場所でそれを呼び出すことができます。

＜例＞hogeをメソッドのように使用して値を設定します

@mixin hoge($color : #fff , $fSize : 10px) {
    color : $color;
    font-size : $fSize;
}
.sample {
    @inclued hoge(black, 20px);
}
.sample2 {
    @include hoge();
}

CSSにコンパイルすると、以下のようになります。

.sample {
    color: black;
    font-size: 20px;
}
.sample2 {
    color: #fff ;
    font-size: 10px;
}

継承（inheritance）

継承は、親要素で指定したものが継承して適用されるものです。

＜例＞「%」で親要素を作り、子要素で「@extend %~」で継承します。

%test-shared {
    border: 1px solid #ccc ;
    padding: 10px;
    color: #333 ;
}
.test1 {
    @extend %test-shared;
}
.test2 {
    @extend %test-shared;
    border-color: green;
}

CSSにコンパイルすると、以下のようになります。

.test2, .test1 {
    border: 1px solid #ccc ;
    padding: 10px;
    color: #333 ;
}
.test2 {
    border-color: green;
}