Sass で変数を使用する

Sass の利点である変数の使い方について見ていきます。変数の仕組みなどは、 CSS のバージョンアップとともにネイティブでサポートされつつありますが、ここでは SCSS による変数について確認します。

参考：Sass Documents

変数定義

SCSS ファイル内で変数を定義するには、次のような構文を使用します。

$変数名: 値;

例えば、サイト共通の色やフォントを定義したい場合、次のように定義します。

$_color-text: #333;
$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

body {
  color: $_color-text;
  font-family: $_font-family;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

上記定義をコンパイルすると変数部分が置き換わり CSS として次のように出力されます。

body {
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

変数名の注意点（アンダースコアとハイフン）

Sass のドキュメントに記載されているのですが、SCSS の中で定義した変数名に含まれるアンダースコア 「_」と、ハイフン「-」 は同じ物として扱われます。 例えば、 $color-text という名前で定義した変数は、 $color_text という名前でも参照できます。

Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that $font-size and $font_size both refer to the same variable. This is a historical holdover from the very early days of Sass, when it only allowed underscores in identifier names. Once Sass added support for hyphens to match CSS’s syntax, the two were made equivalent to make migration easier.

変数のスコープ

Sass の変数は、ブロック内でのみ参照可能なローカル変数とどこからでも参照可能なグローバル変数を定義することができます。

ブロック内に書かれている変数は、「ローカル変数」となり、ブロック内のネスト先でも参照可能となります。ローカル変数として振舞うため、ブロックの外からは参照することはできません。

ブロックの外側で定義される変数は、「グローバル変数」となり、どこからでも参照することができます。

$_color-text: #333;  // グローバル変数の定義

body {
  color: $_color-text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.c-btn {
  $color-btn-text: #999;  // ローカル変数の定義（.c-btnのブロック内のみ参照可能）
  color: $color-btn-text;
  display: block;
  width: 100%;
  .c-btn--ghost {
    background-color: transparent !important;
    border: 1px solid #fff;
    color: $color-btn-text;
  }
}

変数に値を代入する

定義した変数に別の値を代入するには、変数の定義と同じ $変数名: 値; という構文を使用します。

次の例は、@while ループのブロックの中で、 h1 から h5 までの要素に対しフォントサイズを指定します。その中で、 $i 変数の値を 1 ずつインクリメントして代入を行っています。

$i: 1;

@while $i <= 5 {
  h#{$i} {
    font-size: 2rem - (0.2rem * $i);
  }
  $i: $i + 1;
}

SCSS をコンパイルすると次のように出力されます。

h1 {
  font-size: 1.8rem; }

h2 {
  font-size: 1.6rem; }

h3 {
  font-size: 1.4rem; }

h4 {
  font-size: 1.2rem; }

h5 {
  font-size: 1rem; }

セレクタやプロパティなどを補間する（インターポレーション）

変数の値をセレクタの一部やプロパティの一部に使いたい場合、インターポレーション（間を補う）という機能を使うことができます。インターポレーションは、「#{$変数名}」の形式で記述することでほとんどの部分を補完することができます。

$_prefix: "bn_";

.#{$_prefix}c-btn {
  display: block;
}

コンパイルを行うと次のように出力されます。

.bn_c-btn {
  display: block;
}

変数のデータタイプ

Sass で扱える変数のデータタイプには、次の8種類があります。

• Numbers: 数値（単位を含んでも可 16 , 1.5em）
• Strings: 文字列
• Colors: 色(red, #0cf2f9, rgba(255, 255, 0, 0.5))
• Lists: スペースやカンマで区切られた値のリスト (1em 2em 0.5em , Helvetica, Arial, sans-serif)
• Maps: 連想配列 ((key1:value1, key2:value2))
• Boolean: 真値あるいは偽値 (true, false)
• null: null
• Functions: get-function(“関数名”) で返される関数への参照

データタイプを確認する

Sass では、「 type-of() 」関数を使用する事で変数のデータタイプを確認することができます。

$color: #f00;

.c-btn {
    content: "#{type-of($color)}";
}

コンパイルを行うと次のように出力されます。

.c-btn {
  content: "color"; }