CSS 変数と Sass 変数の違い

2019-11-21 2019-11-24

Sass を使用したことのある人なら、変数が扱えることはご存知かと思います。しかし、CSS にも変数の機能があることは知っていますか？

CSS の変数と Sass の変数は別物です。それぞれの違いを明らかにして使い所を紹介します。

CSS 変数

CSS 変数の宣言方法

構文



セレクター {
  --変数名: 値;
}

例：


:root {
  --theme-primary: indigo;
  --theme-secondary: pink;
}

CSS 変数の使用方法

構文



var(--変数名 [,代替値])

基本形：


.bg-primary {
  background-color: var(--theme-primary);
}

代替値を指定：


.text-green {
  color: var(--green, green);  /* --green が定義されていなければ green */
}

CSS 変数の継承

次の例は、HTML では家族構成を、CSS では瞳の色 (--eye-color) を示しています。

HTML:


<div class="grand-mother">
    <div class="mother">
        <div class="myself"></div>
        <div class="brother"></div>
    </div>
</div>

CSS:


.grand-mother {
  --eye-color: blue;
}
 
.brother {
  --eye-color: brown;
}

それぞれの人物の瞳の色 (--eye-color) は次のようになります。

class="grand-mother" の要素: blue
class="mother" の要素: blue（親から継承）
class="myself" の要素: blue（親から継承）
class="brother" の要素: brown（継承値をオーバーライド）

CSS 変数の活用例

ライトテーマとダークテーマを切り替える例を紹介します。

次に示すデモでは、ライトテーマをデフォルトとして、:root セレクターでテーマカラーを表す変数を宣言します。ダークテーマが選択されたら、jQuery で <body> 要素に .thema-dark というクラスを追加します。CSSでは、body.thema-dark セレクタで先ほど変数のカラーをダークテーマ向けのものへとオーバーライドします。

トップバー右端にあるボタンを何度か押してみてください。

この例の良いところは、テーマ切り替えの際に CSS 変数の値を変更するだけで一気に全体のカラーの変更を反映できることです。

Sass 変数

Sass 変数の宣言方法

構文



$変数名: 値;

例：


$theme-primary: indigo;
$theme-secondary: pink;

Sass 変数の使用方法

構文



$変数名

基本形：


.bg-primary {
  background-color: $theme-primary;
}

補完を使用：


$IMG_PATH: '/static/img/';
 
main {
  background: url(#{$IMG_PATH}background.png);  // /static/img/background.png
}

Sass 変数のスコープ

次の例では、$padding-x はグローバルスコープですが、$padding-y は .sction-1 がスコープになります。


$padding-x: 16px;
 
.section-1 {
  $padding-y: 8px;
  
  padding: $padding-y $padding-x;
  
  .item {
    padding: $padding-y $padding-x;
  }
}
 
.section-2 {
  padding: $padding-y $padding-x;  // Undefined variable: "$padding-y".
}

Sass 変数の活用例

Sass:


@for $i from 0 to 6 {
  .m-#{$i} {
    margin: 4px * $i;
  }
}

CSS（コンパイル結果）:


.m-0 {
  margin: 0px;
}
 
.m-1 {
  margin: 4px;
}
 
.m-2 {
  margin: 8px;
}
 
.m-3 {
  margin: 12px;
}
 
.m-4 {
  margin: 16px;
}
 
.m-5 {
  margin: 20px;
}

まとめ

CSS 変数は、HTML要素の親子関係で宣言が継承されます。また、宣言はオーバーライドが可能なため、上位の要素でオーバーライドすると、それ以降すべての参照で変更が反映されることになります。

一方、Sass 変数は変数として扱えるのはコンパイル前だけであり、CSS へコンパイル後は参照箇所それぞれで個別の値として扱われます。そのため、CSSとは異なり、JavaScriptでテーマ切り替えの例のような参照値変更を行うことができません。

以上から、Sass を使用していても CSS 変数の利用価値が十分にあることが分かります。