Dart Sassの変数の基本的な使い方｜Dart Sass入門
Sassの特徴の1つに「変数」機能があります。
現在はCSSにも変数機能があるので、そこまで便利に思わないかもしれませんが、Sassならではの特徴があります。
今回はDart Sassの変数機能についてまとめておきます。
変数を使うメリット
「変数」はJavaScriptや他のプログラミング言語を使っている人にとってはおなじみの機能です。
値に名前を付けて管理することは、いくつかのメリットがあります。
同じ値を複数箇所で使い回せる
まず、変数を使う大きなメリットは同じ値を複数箇所で使い回せるようになることです。
例えばウェブサイト上で使うボタンの色やシャドウの強さなど、変数にして管理することで修正時に1箇所変更するだけで反映されます。
同じ記述を何度も書く必要がなるため、効率化にも繋がります。
どんな値か分かりやすくなる
また、変数で管理しておくことで、どんな値なのか分かりやすくなるメリットもあります。
例えば「#0076b5」というカラーコードを見ても、この色がなんなのかパッと見では分かりません。
しかし、「$primary-color」と名前が付いていると、「この色はメインとなる色なんだ」と分かりやすくなります。
名前を付けることで、他の人が見たり、後から見返したときにどんな値なのか分かりやすくなります。
CSS変数との違い
CSSにも変数機能がありますが、Sassの変数機能の特徴は「コンパイル後はただの値になること」です。
たとえばCSS変数の場合は、メディアクエリなどを使って特定条件の場合に変数の中の値を一括で変更できます。
そのため、ダークモード時に色を変える対応をする場合はCSS変数を使った方がラクに実現できます。
ただCSS変数は書き方が直感的ではないため、Sass変数でCSS変数を管理するようなハイブリッドな使い方をする場合もあります。
DartSass変数の使い方
変数の定義
変数を定義するには、Sassファイル上で「$変数名: 値;」の形で記述します。
$primary-color: #0076b5;変数のルールは下記の通りです。
$マークを先頭に付ける- 数字から始まる変数名は不可（
$1st-color） - CSS変数のように「
--」で始まったり、「@」で始まる変数名は不可（$--primary-color、$@primay-color） - 値であれば何でも入るため、色以外にもpx指定やフォントも定義できる
変数の使用
変数を使いたい場合は、定義した変数名を入力するだけで使えます。
例えば「background-color」で使いたい場合は下記のように記述します。
background-color: $primary-color;かなり直感的ではないでしょうか。
ファイル分割して変数を使用する場合
「variable.scss」のような変数定義用のファイルを用意して、その中の変数を「@use」で呼び出して使う場合、別ファイルで定義された変数だと明確に記述する必要があります。
まず、@useで呼び出す場合に「@use "ファイル名" as 名前空間;」のように定義します。
使いたい場合は「名前空間.$変数名」のようにすれば使えます。
@use "variable" as var;
.primary-btn {
background-color: var.$primary-color;
}このように記述することで「var」の中にある「$primary-color」を使うと分かります。
ちなみに、名前空間を定義していない場合はファイル名がそのまま名前空間になります。
!defaultフラグの活用
少しややこしいですが、DartSassには「!default」フラグ機能があります。
変数の定義時に「!default」を付けることで、変数にまだ値が設定されていないか値が「null」のときにだけ値を設定してくれます。
そのため、下記の場合は「#0076b5」が入ります。
$primary-color: #0076b5 !default;
.primary-btn {
background-color: $primary-color;
}しかし、下記の場合は「#000」が入ります。
$primary-color: #000;
$primary-color: #0076b5 !default;
.primary-btn {
background-color: $primary-color;
}これは、ライブラリを作ったり、使い回しができるようなコードを書く場合に使える機能です。
すでに変数を定義していればその変数の値を使ってコードを生成して、定義していないのであればデフォルトの変数の値を使います。
