Sass関数でCSS変数を使用する方法はありますか。軽くなった?このようなもの:
_:root {
--color: #ff00ff;
}
.div {
background-color: lighten(var(--color), 32%);
}
_
「lighten($color, $amount)
の引数_$color
_は色でなければならない」というエラーメッセージが表示されます。
私はそれらをjsで使用する必要があるので、CSS(Sassではなく)変数を使用しています。
更新:
私はSass 3.5.0がネイティブCSS関数でCSSカスタムプロパティをサポートするようになったことを読んだばかりです。 node-sassでこれを試しましたが、まだlibsassはRuby Sass 3.5のこの機能をサポートしていません
ネイティブCSS関数の場合、CSSをコンパイルするためにSassで文字列補間を使用する必要があったので、sassはそれらを独自の実装に置き換えます。
--Primary: #{"hsl(var(--P-h), var(--P-s), var(--P-l))"};
Sass関数の場合、明度のための純粋なCSSを思いついたのは(IEでは機能しません)、色の値を色相、彩度、明度に分けて、hsl()内で使用します。これはrgba()でも使用できますが、hsl()を使用すると、アプリケーションのテーマのシェードをより簡単に制御できます。
:root {
--P-h: 203;
--P-s: 82%;
--P-l: 41%;
--Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}
次に、アクティブ、ホバー、アクセントなどのシェードは、元の明るさのパーセンテージを計算するためにcalcを使用して、変更されたlightnessを使用できます。
:root {
--Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}
これは逆に軽くすることもできますが、すべてのシナリオで機能するわけではありません。また、かなり面倒で、変数スコープが少し汚染されます。
CSS Colorvars(csscolorvars.github.io) を使用すると、明度と透明度の関数が得られ、カラー変数に明度、暗度、透明度を適用できます。
:root {
--primary-color: #ff0c22;
--primary-HS: 355, 100%;
--primary-HSL: 355, 100%, 52%;
--secondary-color: #663399;
--secondary-HS: 270, 50%;
--secondary-HSL: 270, 50%, 40%;
}
.block{
background-color: hsl(var(--primary-HS), 60%);
/*
Is equivalent to what is desired:
background: lighten(var(--primary-color), 8%)
*/
}
CSS Colorvarsのリンク: https://csscolorvars.github.io/
問題のコメント: https://github.com/CSSColorVars/csscolorvars/issues