使用CSS变量作为Sass函数参数 [英] Using CSS Variables as Sass function arguments

问题描述

是否可以将CSS变量与Sass函数一起使用，例如减轻？像这样：

Is there a way to use CSS variables with Sass functions e.g. lighten? Something like this:

:root {
  --color: #ff00ff;
}

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

我收到一条错误消息，内容为参数 变亮（$ color，$ amount）的$ color 必须是颜色。

I'm getting an error message that "Argument $color of lighten($color, $amount) must be a color".

我使用CSS（而不是Sass）变量，因为我需要在js中使用它们。

I'm using CSS (not Sass) variables, because I need to use them in js.

推荐答案

UPDATE：

我刚刚读到Sass 3.5.0现在应该支持带有本地CSS函数的CSS自定义属性。我用node-sass尝试过，但是libsass还不支持Ruby Sass 3.5的功能。

I just read that Sass 3.5.0 now should support CSS Custom Properties with native CSS functions. I tried this with node-sass but as yet libsass doesn't support this feature of Ruby Sass 3.5

对于本机CSS我认为sass函数可以用其自己的实现替换它们，因为我必须在Sass中使用字符串插值来使css进行编译：

For native CSS functions I think sass replaces them with its own implementation, as I had to use string interpolation in Sass to get my css to compile:

-主要：＃{ hsl（var（-Ph），var（-Ps），var（-Pl））};

对于Sass函数，我想出最纯净的CSS来实现亮度（显然不适用于IE）是将颜色值分为色相，饱和度和亮度，以便在hsl（）中使用。这也可以与rgba（）一起使用，但是hsl（）可以更轻松地控制应用程序主题的阴影：

For Sass functions, the closest thing I came up with pure CSS for lightness (won't work with IE, obviously), is to separate the colour values into hue, saturation and lightness to use inside hsl(). This could also be used with rgba(), but hsl() can be used to control shades more easily for the theme of the application:

:root {
    --P-h: 203;
    --P-s: 82%;
    --P-l: 41%;
    --Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}

然后为活动，悬停，重音等阴影可以使用更改后的 lightness 通过使用calc计算原始亮度的百分比：

Then the shades for active, hover, accents etc. can use an altered lightness by using calc to calculate a percentage of the original lightness:

:root {
    --Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}

这也可以减轻重量，但这是行不通的对于每种情况。这也很混乱，最终导致可变范围内的污染。

This could go the other way to lighten also, but this won't work for every scenario. It's also pretty messy and you end up with a bit of pollution in the variable scope.

这篇关于使用CSS变量作为Sass函数参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！