##結論
--cssCustomeProperty: #{$sassVariable}
このsassの変数を#{ }
で囲むのはcalcとかでも一緒ですね。
参考:SCSSの変数と、CSS3のcalc()を併用するには
##用例
/* sass変数の定義 */
$color_primary: #f00000;
/* 疑似クラス:rootでcss変数の定義 */
:root {
--color-primary: #{$color_primary};
}
/* 定義済みcss変数の利用 */
body {
color: var(--color-primary);
}
##補足:sass関数にcss変数を入れるのは出来ない
body {
color : darken(var(--color-primary), 10%);
}
/* 上記はエラーになる */
無理難題を言っているのかもしれないが、この辺りの融通が利けば助かるのに、と思うときが稀にある。