add_to_home_screen
Libra NK

CSS 変数と Sass 変数の違い

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

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

目次

CSS 変数

CSS 変数の宣言方法

構文
  1. セレクター {
    2. 

  2.   --変数名: 値;
    3. 

  3. }
    4.

例：

  1. :root {
  2.   --theme-primary: indigo;
  3.   --theme-secondary: pink;
  4. }

CSS 変数の使用方法

構文
  1. var(--変数名 [,代替値])
    2.

基本形：

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

代替値を指定：

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

CSS 変数の継承

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

HTML:

  1. <div class="grand-mother">
  2.     <div class="mother">
  3.         <div class="myself"></div>
  4.         <div class="brother"></div>
  5.     </div>
  6. </div>

CSS:

  1. .grand-mother {
  2.   --eye-color: blue;
  3. }
  4.  
  5. .brother {
  6.   --eye-color: brown;
  7. }

それぞれの人物の瞳の色 (--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 変数の宣言方法

構文
  1. $変数名: 値;
    2.

例：

  1. $theme-primary: indigo;
  2. $theme-secondary: pink;

Sass 変数の使用方法

構文
  1. $変数名
    2.

基本形：

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

補完を使用：

  1. $IMG_PATH: '/static/img/';
  2.  
  3. main {
  4.   background: url(#{$IMG_PATH}background.png);  // /static/img/background.png
  5. }

Sass 変数のスコープ

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

  1. $padding-x: 16px;
  2.  
  3. .section-1 {
  4.   $padding-y: 8px;
  5.   
  6.   padding: $padding-y $padding-x;
  7.   
  8.   .item {
  9.     padding: $padding-y $padding-x;
  10.   }
  11. }
  12.  
  13. .section-2 {
  14.   padding: $padding-y $padding-x;  // Undefined variable: "$padding-y".
  15. }

Sass 変数の活用例

Sass:

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

CSS（コンパイル結果）:

  1. .m-0 {
  2.   margin: 0px;
  3. }
  4.  
  5. .m-1 {
  6.   margin: 4px;
  7. }
  8.  
  9. .m-2 {
  10.   margin: 8px;
  11. }
  12.  
  13. .m-3 {
  14.   margin: 12px;
  15. }
  16.  
  17. .m-4 {
  18.   margin: 16px;
  19. }
  20.  
  21. .m-5 {
  22.   margin: 20px;
  23. }

まとめ

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

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

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