In my head.

感想と考え事とメモ

カスタムプロパティにSassの変数使うときは#{}つける

タイトル通りだけど、カスタムプロパティにSassの変数使うときは#{}つける。
つけないとおかしなことになる。

Sassの変数適用される書き方:

$common-text-color: #6e6e6e;
--button-text-color: #{$common-text-color};

.button {
  color: var(--button-text-color);
}.button {
  color: #6e6e6e;
}

#6e6e6eが出力される。

Sassの変数適用されない書き方:

$common-text-color: #6e6e6e;
--button-text-color: $common-text-color;

.button {
  color: var(--button-text-color);
}.button {
  color: $common-text-color;
}

$common-text-colorという文字列が出力される。

以前は#{}なくても大丈夫だったのが、Sass・LibSass・node-sassの変更に伴って、Sassの変数がコンパイルされなくなったみたい。
(英語力低いから解釈不安)

Assigning SASS variables to CSS Variables (Custom Properties) no longer works