CSS 変数と Sass 変数の違い

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

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

CSS 変数

CSS 変数の宣言方法

構文
  1. セレクター {
  2. --変数名: 値;
  3. }

例:

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

CSS 変数の使用方法

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

基本形:

  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. $変数名: 値;

例:

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

Sass 変数の使用方法

構文
  1. $変数名

基本形:

  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. padding: $padding-y $padding-x;
  6. .item {
  7. padding: $padding-y $padding-x;
  8. }
  9. }
  10.  
  11. .section-2 {
  12. padding: $padding-y $padding-x; // Undefined variable: "$padding-y".
  13. }

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 変数の利用価値が十分にあることが分かります。