我是 sass 的新手,我写了一些 sass 代码,但它没有编译。
$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
但是当我用变量替换 linear-gradient 时它工作正常即
$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 变量的作用和作用是什么
最佳答案
确实,将变量从 map-get 传递到其他 sass 函数确实有些问题。
但是你可以稍微修改你的代码,它会起作用:
$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);
}
}
你为每个类定义了两种颜色(普通版和亮版),然后通过双映射获取来使用它。
关于css - sass 编译错误说 $color : null is not a color even though i declared color,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51965297/