【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！

2021.06.17

WEB

Webデザイン

今回はSassの機能の一つ、「変数」ついて解説していきます。変数の記述はSassをより便利に使う上で確実に覚えておきたい機能なので、これを機にしっかり理解していきましょう。

Sassのコンパイルに関しては「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」を参照にしてください。
また、Sassのネスト機能に関しては「【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう！書き方と利点を解説！」を参考にしてください。

INDEX

変数の基本
Sass変数の記述方法
Sass変数の使用例
さいごに

変数の基本

「変数」とは、任意の名前で宣言した変数名に値を代入しておくことで、その変数を呼び出すと好きなタイミングでその値を参照できるという機能です。
これにより毎回値を記述することがなくなるため記述の手間が大幅に削減できるほか、修正の際も変数の値を一か所書き換えれば、その変数で記述している要素すべてが修正されるので、メンテナンスコスト面においても、大きな利点があります。

CSSでも変数は使用できますが、Sassの変数とは記述方法や仕様が異なります。
また、CSSの変数に入れることのできる値はプロパティに入れることのできる値のみになりますが、Sassで取り扱うことのできる値はBooleanや配列など、CSSでは扱えない型の値の代入も可能となります。
CSSの変数に関しては「CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編）」を参照ください。

Sass変数の記述方法

Sass変数の宣言と呼び出し

では、Sass変数の記述方法について見ていきましょう。
Sassの変数は$(ドルマーク)の後に変数名を記述し、:(コロン)の後に値を指定します。
変数の呼び出しも同じように使いたいプロパティの値に$変数名と入力することで、任意の場所に呼び出すことが可能です。

$gray: #c0c0c0;

.text{
  background-color: $gray;
}

コンパイル後のCSSは下記のようになります。

.text {
  background-color: #c0c0c0;
}

Sass変数名で使える文字と使えない文字

Sassの変数名には英数字のほかに-(ハイフン)や_(アンダーバー)などを使うことができます。また、マルチバイト文字も対応しているので日本語も使用することが出来ます。

なんでも使えるのか？と思うかもしれませんが、使用できない文字も存在します。

まず、「$10px」や「$60height」のように半角数字から始まるものは使用できません。
ただ、全角であれば使うことが出来ます（「$１０px」「$６０height」など）。

次に「$@name」など、@(アットマーク)など使えない記号から始まるものは変数名として使用できません。

最後に、-(ハイフン)が二つ連続して始まるもの、つまり「$–red」などは使用できません。

以上のパターンは変数名として使用できないため注意しておきましょう。

Sass変数の参照範囲

ルールセット内で変数を宣言すると、参照範囲をそのルールセット内に限ることができます。

.text {
  $gray: #c0c0c0;
  background-color: $gray;
}
.title {
  $gray: #666666;
  border-bottom: solid 1px $gray;
}

上記のような場合、同じ変数名であってもルールセット内が参照範囲となるためバッティングすることはありません。

コンパイル後は下記のようになります。

.text {
  background-color: #c0c0c0;
}
.title {
  border-bottom: solid 1px #666666;
}

同じ変数名でありながら、違う値が参照されていることがわかります。

Sass変数と補完

通常Sass変数を参照できる場所はプロパティの値のみとなっており、下記のようにセレクタ名やURLの一部などで参照しようとするとエラーになります。

$selector: '.section-title-wrapper';
$serector{
  border-bottom: solid 1px #cccccc;
} 

$IMAGE: '../../common/image/';
.category-image {
  background-image :url($IMAGEcategory001.jpg);
}

この場合は#{}の中に変数名を記述すると解決できます。これをインターポレーション（補完）といいます。

$selector: '.section-title-wrapper';
#{$selector}{
  border-bottom: solid 1px #cccccc;
} 

$IMAGE: '../../common/image/';
.category-image {
  background-image :url(#{$IMAGE}category001.jpg);
}

コンパイル後は下記のようになります。

.section-title-wrapper {
  border-bottom: solid 1px #cccccc;
}

.category-image {
  background-image: url(../../common/image/category001.jpg);
}

Sass変数の使用例

Sassでは従来通りに変数を使用する場合のほか、Sassのその他の機能を用いる場合も変数が登場することが多くあります。
例えば繰り返し処理をするfor文や、条件分岐のif文を記述する際に変数が用いられます。
ここではfor文を用いて10ずつ増える余白要素の記述を紹介いたします。
for文の詳しい記述方法は別の機会にご紹介いたしますが、ここでfor文の中にも変数の記述があることに注目してください。

@for $value from 1 through 7 {
  .mt_#{$value * 10} {
    margin-top: 10px * $value;
  }
}

コンパイル後は下記になります。

.mt_10 {
  margin-top: 10px;
}

.mt_20 {
  margin-top: 20px;
}

.mt_30 {
  margin-top: 30px;
}

.mt_40 {
  margin-top: 40px;
}

.mt_50 {
  margin-top: 50px;
}

.mt_60 {
  margin-top: 60px;
}

.mt_70 {
  margin-top: 70px;
}

このように、Sassのほかの機能を使いこなすうえでも変数は理解しておくべき機能だということがうかがえます。

さいごに

今回はSassの変数について紹介しました。変数を使用することでより効率的に記述できるようになるほか、Sassを深く使いこなすうえで欠かせない機能だということがご理解いただけたかと思います。この記事をきっかけにSassをもっと便利に使いこなしていただけたのなら幸いです。

この記事を書いた人

加藤陵二ソリューション事業部 webデザイナー: アーティスへ入社後、webデザイナーとして大学サイトや病院サイト、企業サイト等のデザイン・コーディングに携わる。資格：Photoshopクリエイター能力認定試験スタンダード、illustratorクリエイター能力認定試験エキスパート、Webクリエイター能力認定試験初級