Dart Sassの変数の基本的な使い方｜Dart Sass入門

Sassの特徴の1つに「変数」機能があります。
現在はCSSにも変数機能があるので、そこまで便利に思わないかもしれませんが、Sassならではの特徴があります。

今回はDart Sassの変数機能についてまとめておきます。

変数を使うメリット

「変数」はJavaScriptや他のプログラミング言語を使っている人にとってはおなじみの機能です。

値に名前を付けて管理することは、いくつかのメリットがあります。

同じ値を複数箇所で使い回せる

まず、変数を使う大きなメリットは同じ値を複数箇所で使い回せるようになることです。

例えばウェブサイト上で使うボタンの色やシャドウの強さなど、変数にして管理することで修正時に1箇所変更するだけで反映されます。

同じ記述を何度も書く必要がなるため、効率化にも繋がります。

どんな値か分かりやすくなる

また、変数で管理しておくことで、どんな値なのか分かりやすくなるメリットもあります。

例えば「#0076b5」というカラーコードを見ても、この色がなんなのかパッと見では分かりません。
しかし、「$primary-color」と名前が付いていると、「この色はメインとなる色なんだ」と分かりやすくなります。

名前を付けることで、他の人が見たり、後から見返したときにどんな値なのか分かりやすくなります。

CSS変数との違い

CSSにも変数機能がありますが、Sassの変数機能の特徴は「コンパイル後はただの値になること」です。

Webrandum

CSSのカスタムプロパティ（変数機能）の使い方

https://webrandum.net/css-custom-property

SassやStylusといったプリプロセッサーを使っている人であれば、あたりまえの機能である「変数」。IE11では対応していないのでPolyfillが必要ですが、モダンブラウザであればCSSでも使えるようになっているので、今回はそのCSSの変数機能（カスタムプロパティ）についてまとめておきます。CSS変数の使い方変数の定義まずは変数の定義です。:rootに定義しておくとCSS全体で使用できるグローバル変数として定義できます。:root{ /* ここに変数を定義する */ --primary-color: #0000ff;}変数の名前は最初にハイフン2つを付けて「--」そ...

たとえばCSS変数の場合は、メディアクエリなどを使って特定条件の場合に変数の中の値を一括で変更できます。

そのため、ダークモード時に色を変える対応をする場合はCSS変数を使った方がラクに実現できます。

Webrandum

ウェブサイトをダークモードに対応するときに気をつけること

https://webrandum.net/darkmode-support

少し前にこのブログをリニューアルして、一緒に「ダークモードの対応」も行いました。1つのサイトレベルでダークモードを対応したのは初めてだったので、具体的な実装方法や気をつけたことをメモしておきます。ダークモードの対応方法メディアクエリのprefers-color-schemeを使えば、ダークモードやライトモード時のCSSを指定できます。@media (prefers-color-scheme: dark){  ダークモード時のCSS}@media (prefers-color-scheme: light){  ライトモード時の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;
}

これは、ライブラリを作ったり、使い回しができるようなコードを書く場合に使える機能です。

すでに変数を定義していればその変数の値を使ってコードを生成して、定義していないのであればデフォルトの変数の値を使います。