SASS: 是否可以在 change-color() 中使用变量作为参数？

Question

我需要更改 SCSS 变量颜色的 alpha 值。

change-color($myVariable, $alpha: .4);

-> 工作正常。

但是我必须为 alpha 参数使用一个变量值。我首先尝试使用 CSS 变量：

change-color($myVariable, $alpha: var(--opacity));

-> 失败

我试图转义变量： change-color($myVariable, $alpha: #{var(--opacity)});

-> 失败

然后我尝试使用 SCSS 变量： change-color($myVariable, $alpha: $opacity);

-> 失败

至少我用转义方法试过了：然后我尝试使用 SCSS 变量： change-color($myVariable, $alpha: #{$opacity});

-> 失败

我现在不知道...

注意：错误消息是“错误：‘change-color’的参数不足”

Answer 1

如果您使用较新版本的 Sass 来编译您的 CSS，您可以使用 rgba 函数来更改颜色的 alpha 值

.class {
   $color: dodgerblue;
   color: rgba($color, .4); // using alpha value   
   color: rgba($color, var(--opacity)); // using css variable
}

如果您使用的是 Sass 的旧版本，它不允许在 rgba 函数中使用 css 变量 您需要编写一个小函数来处理这个（注意！大写的 Rgba 是为了绕过区分大小写的 Sass 函数）

@function color-alpha($color, $alpha: 1){
    @if type-of($alpha) == number { 
        @return rgba($color, $alpha); 
    } @else { 
        @return Rgba(
            red($color), 
            green($color), 
            blue($color), 
            $alpha
        );
    }
}


.class {
    $color: dodgerblue;
    color: color-alpha($color, .4); // using alpha value 
    color: color-alpha($color, var(--opacity)) // using css variable
}

SASS: 是否可以在 change-color() 中使用变量作为参数？

SASS: is it possible to use variables as argument within change-color()?

css

sass