カスタムプロパティに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