scssの変数をcssの変数に入れる

以下のようにすると入らない。

$base0: #839496;

:root {
  --base0: $base0;
}

変数展開っぽく書くと展開される。

$base0: #839496;

:root {
  --base0: #{$base0};
}

インターポレーションというらしい、変数展開じゃないのか

ダークモード対応

ダークモードに対応するときなどには、以下のようになる。

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
  --base00: #{$base00};
}

@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    --base00: #{$base0};
  }
}

カラースキームから持ってきたやつを入れればいいだけなので、簡単・便利・安心。