Sassの「変数」の定義と参照の基本ルール。

2019年12月27日

Sassの変数の使い方を基礎から学びたい！

変数はとても便利な機能だ。プログラミングの世界では当たり前に使われる変数だが、cssで同じように利用できるととても便利！変数の使い方を覚えて、CSSを快適に書いていこう！

今回はSassの「変数」の使い方の基本を、わかりやすく説明しよう！（※SCSS記法で説明）

Sassの変数定義の基本スタイル

Sassで変数を使う時の基本的なスタイルは次のように書く

$変数名: 値;

つまり$（ダラー）で変数名を宣言して:（コロン）で値と区切り、;（セミコロン）で閉じる形となる。

Sassの「変数名に使えない」文字

変数名は、英数字だけでなく-（ハイフン）や_（アンダーバー）も使え、日本語も使う事ができる。

しかしルール上いくつか「使えない文字」があるので確認しておこう

数字から始まった変数名（例：$500box: 500px;）
連続した-（ハイフン）から始まる変数名（例：$--name:#ff9900;）
@などの使えない記号から始まる変数名（例：$@name:true;）

Sassの変数の「値」に使える内容

Sassの「値」として使える内容は主に

色
数値
文字列
リスト
真偽値（true,false)
Null

実際にわかりやすい実例で解説していこう！

Sassで良く使う「変数の使用例」

「色」に対して変数を使う例

Sass

 $base-color: #333;
 p{
  color: $base-color;
 }

CSSコンパイル後

 p{
  color: #333;
 }

「数値」に対して変数を使う例

ボックスの幅や、線の太さなどの数値を変数として指定する事ができ「単位あり、単位なし」どちらでも使える。

Sass

 $box-size: 400px;
 .box{
  width: $box-size;
 }

CSSコンパイル後

 .box{
  width: 400px;
 }

「文字列」に対して変数を使う例

ファイルパス名や、クラス名などの文字列を変数として使うことも可能だ。

ただし文字列の場合「変数の値」の指定は""（ダブルコーテーション）で指定する。

変数の呼び出しには#{}（インターポレーション）と呼ばれる形式で呼び出すことで、変数が使えない場所でも使用可能となる。

わかりやすく例で見ておこう。

Sass

 $pass: "../img/";
 div{
  background: url(#{$pass}haikei.jpg);
 }

CSSコンパイル後

div{
  background: url(../img/haikei.jpg);
 }

変数のスコープ（参照できる範囲）

変数は基本的にソースコードの「先頭から順番に読まれていく」ので、呼びたしたい変数は、必ず表示する場所よりも「前に」記述しなくてはいけない。

変数は表示指定よりも前に記述する必要がある

p {
  color: $base-color; //参照できない
}
$base-color: #333;
span{
  color: $base-color; //参照できる
}

ただし、いくら前に記述した変数でも、入れ子（ネスト）内に書かれた変数（ローカル変数）は、その入れ子外から参照することはできない。

例外として「!global」フラグをつければ、グローバル変数として認識され、参照可能になる。

ローカル変数とグローバル変数

&sp-color: #ff0; //グローバル変数
#main{
 width:500px;
 $base-color: #333; //ローカル変数
 $new-color: #fc0 !global; //ローカル変数のグローバル化
 span{
  color: $base-color; //参照できる
 }
}
p {
  color: $base-color; //ローカル変数は外から参照できない
}
h2{
 color: $sp-color; //グローバル変数なので参照できる
}
h3{
 color: $new-color; //!globalフラグがついてるので参照できる
}