如何在SCSS颜色功能中控制HSLA alpha通道？

问题描述

下面是我正在尝试做的一个例子。我敢肯定有更好的方法可以做到这一点。基本上，我希望函数通过color变量中的hsla颜色的alpha通道传递，因此我不必为每种颜色都具有多个颜色变量。

我希望能够这样调用该函数：

.item {background-color: color(blue,dark,.5);}

这是我到目前为止所拥有的：

$base-blue:    hsla(200,100%,50%,1);
$base-blue-50: hsla(200,.5);

$palette: (
    blue: (
        base:  $base-blue,light: lighten($base-blue,10%),dark:  darken($base-blue,10%)
    ),blue-50: (
        base:  $base-blue-50,light: lighten($base-blue-50,dark:  darken($base-blue-50,10%)
    )
);

@function color($color,$tone: 'base') {
    @return map-get(map-get($palette,$color),$tone);
}

基本上，我不需要创建$base-blue-50变量。

感谢您的帮助：）

解决方法

如果您使用$base-blue而不是hsl来定义hsla，则可以在color()函数中动态调整其alpha值。

$base-blue: hsl(200,100%,50%);

$palette: (
    blue: (
        base:  $base-blue,light: lighten($base-blue,10%),dark:  darken($base-blue,10%)
    )
);

@function color($color,$tone: 'base',$a: 1) {
    $rgb: map-get(map-get($palette,$color),$tone);
    @return rgba($rgb,$a); // Apply the alpha value
}

.item {
    color: color(blue);            // Output: #00aaff
    color: color(blue,light);     // Output: #33bbff
    color: color(blue,dark);      // Output: #0088cc
    color: color(blue,dark,.5);  // Output: rgba(0,136,204,0.5)
}