Sassの便利機能：変数について

Sassの便利な機能に「変数」があります。ここでいきなり変数と言われると、プログラミングのことが頭をよぎると思うのですが、Sassでの変数は、仕組みだけ理解しておけば大丈夫なので、そんな構えずに使っていきましょう。

変数の基本

変数とは、あらかじめ名前を決めておいて、その名前に値を代入しておくことで、任意の場所で変数名を参照して、値を呼び出すことができるものです。

なんだか難しそうと思った方、全然難しくないので、まずは実際のコードを見てみましょう。

.box {
    border: 1px solid #ff0000;
}

.box .box-title {
    font-size: 18px;
    color: #ff0000;
}

普通のCSSファイルです。boxのborderの色とtitleの文字色が一緒です。Sassではこの色を変数として定義することができます。

$color-red: #ff0000;

.box {
    border: 1px solid $color-red;

    .box-title {
        font-size: 18px;
        color: $color-red;
    }
}

Sassだとこのように書くことができます。最初に$color-redを宣言しておくことで、同じ色を使うときはこの変数を書けばよくていちいちカラーコードを書く必要もありません。

もしデザイナーさんが、やっぱり赤色のカラーコードを変えるなどと言われても、$color-redのカラーコード一箇所を変えるだけで、変数で指定した全ての赤色が変わることになります。

変数名が使えない場合

@height: 100px;
---height: 100px;
100height: 100px;

• @といった記号から始まるとき
• --といったハイフンから始まるとき
• 数字から始まるとき

この３つが変数名が使えないときです。その他では割となんでも変数名として使うことができ、日本語で$赤色とやっても大丈夫ですし、$height１００といった全角数字を変数に使うこともできます。

変数が参照できる範囲

.box {
    $color-red: #ff0000;// セレクタ内でも変数は定義できる

    border: 1px solid $color-red;

    .box-title {
        font-size: 18px;
        color: $color-red;
    }
}

//この場合borderの赤色は反映されない
.box-large {
    border: 1px solid $color-red;
}

このようにセレクタ内でも変数は定義できますが、この場合は子要素でない他のセレクタには$color-redという変数を使うことができません。覚えておきましょう。