sass complie错误,提示$ color:即使我声明了color,null也不是颜色 [英] sass complie error saying $color: null is not a color even though i declared color
问题描述
我是sass的新手,我写了一些sass代码,但未编译。
I am new to sass and I wrote some sass code but it is not compiling.
$classes : primary secondary success warning danger;
$colors : (primary:#007bff,secondary : #6c757d,success: #28a745,warning: #ffc107,dangaer: #dc3545);
@each $class in $classes{
.btn-#{$class}{
$currentColor: map-get($colors,#{$class});
background:linear-gradient(to right,$currentColor,lighten($currentColor,10%));
}
}
错误为:
$color: null is not a color.
stdin 14:55 root stylesheet on line 14 at column 55
但是当我替换线性带有变量的渐变效果很好,即
But when I replace linear-gradient with variable it is working fine i.e
$classes : primary secondary success warning danger;
$colors : (primary:#007bff,secondary : #6c757d,success: #28a745,warning: #ffc107,dangaer: #dc3545);
@each $class in $classes{
.btn-#{$class}{
$currentColor: map-get($colors,#{$class});
background:$currentColor;
//background:linear-gradient(to right,$currentColor,lighten($currentColor,10%));
}
}
此代码已成功编译。
linear-gradient()函数中$ currentColor变量的作用或作用是什么
What is the for nor working of $currentColor variable inside linear-gradient() function
推荐答案
实际上,有些东西可以将变量从map-get传递到其他sass函数。
Indeed there is something with passing variables from map-get to other sass functions.
但是您可以稍微修改一下代码,它将起作用:
But you can slightly modify your code and it will work:
$classes: primary secondary success warning danger;
$colors: (
primary: ( normal: #007bff, light: lighten(#007bff,10%) ),
secondary: ( normal: #6c757d, light: lighten(#6c757d,10%) ),
success: ( normal: #28a745, light: lighten(#28a745,10%) ),
warning: ( normal: #ffc107, light: lighten(#ffc107,10%) ),
danger: ( normal: #dc3545, light: lighten(#dc3545,10%) )
);
@each $class in $classes{
.btn-#{$class}{
$currentColor: map-get(map-get($colors,#{$class}), normal);
$currentColorLighten: map-get(map-get($colors,#{$class}), light);
background: linear-gradient(to right, $currentColor, $currentColorLighten);
}
}
为每个类定义两种颜色(正常和淡化)版本),只需通过两次地图获取即可使用它。
You define two colors for each class (normal and lighten version) and just use it via double map-get.
这篇关于sass complie错误,提示$ color:即使我声明了color,null也不是颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!