SASS/SCSS處理 CSS 變數的問題

這是我使用他人套件時遇到的坑。

在使用 SASS / SCSS 時，遇到如下的 code

$red: #DB055E;

:root {
	--red: $red
}

.danger {
	color: var(--red)
}

我預期他應該會生成

:root {
	--red: #DB055E;
}
.danger {
	color: var(--red);
}

但實際上卻是生成

:root {
	--red: $red;
}
.danger {
	color: var(--red);
}

經過查詢，在官網就有解說，要寫成 --CSS 變數: #{SASS 變數} 才行。即改成如下 code 才會生出我要的 CSS

$red: #DB055E;

:root {
	--red: #{$red}
}

.danger {
	color: var(--red)
}

參考資料

SASS: Breaking Change: CSS Variable Syntax. (n.d.). https://sass-lang.com/documentation/breaking-changes/css-vars/