web-dev-qa-db-ja.com

CSS変数をSass関数の引数として使用する

Sass関数でCSS変数を使用する方法はありますか。軽くなった?このようなもの:

_:root {
  --color: #ff00ff;
}

.div {
  background-color: lighten(var(--color), 32%);
}
_

lighten($color, $amount)の引数_$color_は色でなければならない」というエラーメッセージが表示されます。

私はそれらをjsで使用する必要があるので、CSS(Sassではなく)変数を使用しています。

16
Majka

更新:

私は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));
}

これは逆に軽くすることもできますが、すべてのシナリオで機能するわけではありません。また、かなり面倒で、変数スコープが少し汚染されます。

1

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