SASS関数でCSS変数を使用する方法はありますか？

Question

ルートで色を定義しました：

:root {
--purple: hsl(266, 35%, 70%);
}

そして私はそれをSASS関数で使用して透明性を与えようとしています：

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

これを機能させる方法を誰かが知っていますか？それともそれは不可能ですか？

Answer 1

グローバル変数は、：root疑似クラスの要素の外で定義できます。

:root {
  --color-background: #FFFFFF;
}

次のような関数を定義できます。

@function color($color-name) {
  @return var(--color-#{$color-name});
}

それをあなたのサスに呼び出します：

body { 
  color: color(primary); 
}

コンパイルされたsassコードは次のとおりです。

body { 
  color: var(--color-primary); 
}