Sassで変数(Variables)を扱う

Sass ロゴ

プログラムでは変数に値を格納しておくことで、その値を複数の箇所で共有することができます。

CSSでは変数を扱うことができませんが、Sassでは変数を使用することができます。

今回は、Sassの変数(Variables)について紹介します。

変数とは

変数とは、データ(値)を格納するために、プログラム側であらかじめ定義(用意)しておく領域(入れ物のようなもの)です。
変数には、任意の名前(好きな名前)を付けることができます。

定義した変数は、プログラムの任意に場所で使うことができますので、変数に格納した値は「好きな時に好きな場所」で参照して呼び出すことができます。

例えば、以下のようなCSSがあるとします。

ここでは、content クラスのcolorプロパティとborderプロパティの値に#004ee2を指定し、boxクラスのcolorプロパティの値にも#004ee2を指定しています。

これらの値はすべて同じ値ですが、CSSでは値を共有する手段がないので、すべての箇所に同じ値を記述しなければなりません。

しかし、変数を使うことができれば同じ値を共有することができるため、同じ記述を複数の箇所に重複させる必要がなくなります。

上記のCSSをSassで記述すると以下のようになります。

ここではblueという名前の変数を定義しています。

Sassで変数を宣言(定義)する際は、変数名の先頭に$(ダラー)を付けます。(上記の例では$buleという名前で変数を宣言しています。

変数名の後には:(コロン)を記述して、その後に変数の値を記述します。

変数が宣言できたら、後はクラスやIDなどのルールセットのプロパティの値に指定します。(color: $bule;

上記のSassをCSSに変換すると以下のようになります。

変数を指定したプロパティの値が変数の値に置き換わっているのが確認できます。

変数を宣言する場所

ルールセット内での宣言

変数は、ルールセット内で宣言することもできます。

変換後のCSS

別のSassファイルでの宣言

変数の宣言は、変数を利用するSassファイル内になくてもかまいません。(別のSassファイルで宣言(定義)されていてもかまいません。)
別のSassファイルで宣言した変数は、@importを使用してインポートして参照することができます。

@importを使用してインポートした変数を参照する場合は、変数を宣言したSassファイルが、変数を使用する前に読み込まれている必要があります。

変数のスコープ(参照範囲)

変数はソースコードの先頭から順に処理されていきます。

Sassの処理の順序

従って、変数は呼び出す位置よりも前に宣言する必要があります。
1度宣言した変数は、変数の後であればどこからでも参照することができます。

変数を参照できる範囲は「スコープ」と呼びます。

上記の「変数を宣言する場所」の「ルールセット内での宣言」で記載したルールセット内に宣言した変数では、スコープがルールセット内になります。
ですので、ルールセットの外からは変数を参照することができません。

Sass 変数のスコープ

スコープを利用することで、特定のルールセット内だけで参照したい変数を定義することができます。
汎用的な名前の変数を定義したい場合は、ルールセット内で宣言することで、別の変数とコンフリクト(バッティング)することを防ぐことができます。

変数を参照できる場所(使用できる場所)

変数は多くの場合、プロパティの値として参照しますが、宣言した変数をセレクタ名として参照したい場合や、値の一部分として参照したい場合もあります。

例えば以下のように、変数で宣言した値をセレクタ名に使用する場合や、画像のパスをの一部(ディレクトリ)に使用する場合などです。

ただし、上記のコードはエラーになります。

セレクタ名に変数を指定したり、画像のURLの一部に変数を指定する場合は、インターポレーション(補完)という機能を使用します。

インターポレーションは、参照したい変数名を#{ }で囲み#{$変数名}のようにします。

上記のSassコードをCSSにコンパイルすると以下のようになります。

変数名に使える文字と使えない文字

変数名には英数字(アルファベットと数字)、_(アンダースコア)、(ハイフン)を使用することができます。

おすすめはできませんが、マルチバイトの文字も使えるので、日本語の変数名を付けることもできます。

変数名には半角数字や(ハイフン)が使用できますが、変数名の先頭の$(ダラー)の後が半角数字で始まる変数名は使用することができません。
また、2つ以上の(ハイフン)で始まる変数名も使用することはできません。

変数名に使える文字

変数名に使えない文字

参考

本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊です。