Sass の変数を CSS Custom Properties として利用

CSS Custom Propeties（いわゆるCSS変数）は便利です。

この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。

/* variables.scss（変数定義ファイル） */
$some-color: #64ff00;

/* globals.scss（利用側） */
@use 'variables' as *; /*ここのパス解決はアプリケーションの設定次第です */

:root {
  --some-color: #{$some-color};
}

参考: Combining SASS variables with CSS custom properties - DEV Community