我有一个具有两个功能的调色板scss文件，一个用于获取颜色，另一个用于获取颜色，但具有不透明度。该文件的编译不会引发任何错误，但是当我将功能用于不透明性时，出现了一个错误("dark": 0.1, "light": 0.8) isn't a valid CSS value，我也不知道为什么。
$my-colors: (
'default-blue': #0071ce,
'blue': #064f8e,
'yellow': #f79428,
'light-blue': #1888c8,
'green': #54a546,
'red': #C82022,
'pink': #b51e6d,
'orange': #e54e26
);
$my-opacity: (
'dark': 1,
'light': 0.8
);
@function get-color($key: 'default-blue') {
@return map-get($my-colors, $key);
}
@function get-color-alpha($name: 'default-blue', $opacity: 'dark') {
$color: get-color($name);
// Get the named opacity level, if it exists
@if map-key-exists($my-opacity, $opacity) {
$opacity: map-get($my-opacity, $opacity);
}
// Use rgba() to manipulate the color's alpha level
@return rgba($color, $opacity);
}
我正在使用这样的功能：
li h3 {
color: get-color-alpha('default-blue', 'light');
}
我直接在sass v3.5.6文档中查找了问题，发现错误是由“ map-key-exists”函数引起的：http : //sass-lang.com/documentation/Sass/Script/Functions.html。
我没有找到该函数，但是我发现要知道映射是否具有与键关联的值，必须使用map-has-key($map, $key)。因此，如果您更改它并编写如下内容：
$my-colors: (
'default-blue': #0071ce,
'blue': #064f8e,
'yellow': #f79428,
'light-blue': #1888c8,
'green': #54a546,
'red': #C82022,
'pink': #b51e6d,
'orange': #e54e26
);
$my-opacity: (
"dark": 1,
"light": 0.8
);
@function get-color($key: 'default-blue') {
@return map-get($my-colors, $key);
}
@function get-color-alpha($name: 'default-blue', $opacity: 'dark') {
$color: get-color($name);
// Get the named opacity level, if it exists
@if map-has-key($my-opacity, $opacity) {
$opacity: map-get($my-opacity, $opacity);
}
// Use rgba() to manipulate the color's alpha level
@return rgba($color, $opacity);
}
li h3 {
color: get-color-alpha('default-blue', 'light');
}
我们漂亮的sass版本3.5.6编译如下：
li h3 {
color: rgba(0, 113, 206, 0.8);
}
“哇！终于成功了！” 我说！：D
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句