Sass の変数で CSS のカスタムプロパティ(変数)を定義したい

Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ

Sass の変数を #{} で囲ってあげればOK

$textColor: #000;
$backgroundColor: #FFF;

// カスタムプロパティを定義
:root {
  --text-color: #{$textColor};
  --background-color: #{$backgroundColor};
}

👇 コンパイル結果

:root {
  --text-color: #000;
  --background-color: #FFF;
}

₍ ᐢ. ̫ .ᐢ ₎ よき！

🙅 #{} で囲わないと変数名がそもまま出力されてしまうので注意

$textColor: #000;
$backgroundColor: #FFF;

:root {
  --text-color: $textColor;
  --background-color: $backgroundColor;
}

👇 コンパイル結果

:root {
  --text-color: $textColor;
  --background-color: $backgroundColor;
}

(ᐡ o̴̶̷̤ ﻌ o̴̶̷̤ ᐡ) ダメ

mixin を使ってカスタムプロパティを定義できる

$textColor: #000;
$backgroundColor: #FFF;

@mixin defaultColorVariables() {
  --text-color: #{$textColor};
  --background-color: #{$backgroundColor};
}

// mixin でカスタムプロパティを定義
:root {
  @include defaultColorVariables;
}

mixin とかにまとめておけば darkmode 対応のときとかカラーセットを一元管理できそう

おわり

---

Every Layout

その着せ替え人形は恋をする 1巻 (デジタル版ヤングガンガンコミックス)

今季は着せ恋を観ればいいと聞きました