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