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ではなく）変数を使用しています。

cssvariablessasscss-variables
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
Jordan Whitfield

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

1
Fernando Javier Averanga