使用映射到hsl值的Sass變量在嘗試與hsla一起使用時不起作用

Question

我有一個映射到hsl值的Sass變量。當我嘗試用hsla添加一點透明度時，它不起作用。我這樣做：

$white:hsl(100, 100%, 100%); 

.thing{ 
color:hsla($white,.9); 
} 

使用一飲而盡，上海社會科學院建我的CSS，我得到這個錯誤：「所需的參數$明度呼叫缺少上線的功能HSLA在{文件的路徑} {行號} 「

如果我將hsla替換爲rgba它工作正常，是的，我可以這樣做，但我想保留所有顏色在hsl中。有沒有解決方法，或者這是一個Sass的問題？

Answer 1

這不是SASS的問題，功能根本不存在。如果你看documentation，有兩個版本的rgba（），一個接受所有參數，另一個接受一個Color對象。

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

如果你看一下HSLA（）的文件，它只有單獨接受值。

hsla($hue, $saturation, $lightness, $alpha)

爲了實現自己的目標，你可以這樣做：

$white:hsl(100, 100%, 100%); 

.thing{ 
color: hsla(hue($white), saturation($white), lightness($white), .9); 
} 

或者......如果你想通過Color對象，你可以創建自己的功能，因爲你can't overload functions;例如hslac($color, $alpha)

@function hslac($color, $alpha) { 
    @if(type-of($color) == "color") { 
    @return hsla(hue($color), saturation($color), lightness($color), $alpha); 
    } 
    @else { 
    @error "You didn't pass a color object"; 
    } 
}