いまさら聞けない sass 入門(後編)

racchai.hatenablog.com

前編では sass の歴史に触れつつ、機能説明を見ながらお試しできる環境を作るところまで解説しました。後編では具体的な機能について書いていきます。

セレクタのネスト(入れ子)

sass では以下のようにセレクタをネストして記述することができるので、親子関係がわかりやすくなります。

.parent {
    .child {
        color: #000;
        // "&" で自身のセレクタを参照
        &:hover {
            text-decoration: underline;
        }
    }
}

コンパイル結果

.parent .child {
  color: #000;
}

.parent .child:hover {
  text-decoration: underline;
}

変数

sass では変数が使えます。同じ色やサイズをいろんなセレクタに適用している場合は便利ですよね。

$margin: 10px;
$color: #000;

.parent {
    margin: $margin;
    .child {
        color: $color;
        // 演算も可能。単位を加味して結果を出力してくれます
        margin: $margin / 2;
    }
}

コンパイル結果

.parent {
  margin: 10px;
}

.parent .child {
  color: #000;
  margin: 5px;
}

条件分岐

変数があるのでもちろん条件分岐もあります。後述する @function や @mixin の中で使うことが多いです。

$isDebug: true;
body {
    @if $isDebug == true {
        background-color: red;
    } @else {
        background-color: #000;
    }
}

コンパイル結果

body {
  background-color: red;
}

ループ

普段はあまり使いませんが、ループを使えたりします。以下は@forを使った例。他にも @each や @while などのループ構文があります。

@for $i from 0 to 3 {
    .loop_#{$i} {
        margin: 1px * $i;
    }
}

コンパイル結果

.loop_0 {
  margin: 0px;
}

.loop_1 {
  margin: 1px;
}

.loop_2 {
  margin: 2px;
}

関数

ループや演算は @function で関数宣言することで部品化しましょう。例として引数に与えた値を半分にする関数を定義してみます。せっかくなので奇数だったら小数点以下を切り捨てるように条件分岐も加えてみました。

@function half($value) {
    @if $value % 2 == 0 {
        @return $value / 2;
    } @else {
        @return floor($value / 2);
    }
}

.parent {
    width: half(10px);
    .child {
        width: half(5px);
    }
}

コンパイル結果

.parent {
  width: 5px;
}

.parent .child {
  width: 2px;
}

ミックスイン

関数は共通処理で部品化しましたが、ミックスインでは共通のスタイルを部品化します。よくある例として、ベンダープレフィックスをミックスイン化してみます。

@mixin border-radius($value) {
          border-radius: $value;
     -moz-border-radius: $value;
  -webkit-border-radius: $value;
}

.box {
  @include border-radius(10px);
}

コンパイル結果

.box {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

なお、いま現在 border-radius は主要ブラウザで実装済みですのでベンダープレフィックスは不要です。

継承

@extendを使うことで、既存セレクタの内容を継承することができます。

.message {
  color: red;
}

.alert-message {
  @extend .message;
}

コンパイル結果

.message, .alert-message {
  color: red;
}

ミックスインと継承の使い分けについては様々論争がありますが、筆者は継承をメインで使うスタイルをおすすめしています。 というのも、ミックスインは使う度に同じコードがインライン展開されていくので、そればかり使っているとコンパイル結果のファイルサイズが大きく膨らんでしまうためです。 ですので、以下の条件を満たす場合だけミックスインを使うことにしています。

• 再利用するスタイルが動的だったりして継承では実現できない場合
• 多重継承されるようなスタイルの場合

とはいえ好みやプロジェクトの性質もあると思うので、各々でルールを検討してみると良いでしょう。

import

ミックスインや共通で使う変数等は別ファイルに分割して、必要なものだけ個別にロードすることができる機能です。なお、部品ファイルは@アンダースコア("_")で始まるファイル名とすることで、@import での利用に限定することができます。

_mixins.scss

@mixin border-radius($value) {
          border-radius: $value;
     -moz-border-radius: $value;
  -webkit-border-radius: $value;
}

racchai.scss

@import "minxins";

.box {
  @include border-radius(10px);
}

コンパイル結果

.box {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

まとめ

今回は sass の基本的な文法/記法についてのみ解説してみました。新たに覚えることはほとんどないので、簡単だったと思います。

まだプロジェクトに取り入れたことがない方は、一度導入してみてはいかがでしょうか。一度使ったら、もう css を生で書く気になんてなりませんよ。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語