SCSS使用box-shadow参数

Question

我似乎不能使用参数(不使用集合)的框阴影。我想使用一个参数(避免重复相同的值)来声明集合的3个部分。

当我尝试下面的scss

@mixin top-shadow($size, $color) {
box-shadow: inset 0 $size $size -$size $color;
}
@include top-shadow(1rem, red);

生成的css如下所示

box-shadow: inset 0 1rem 0rem red;

我希望它看起来像

box-shadow: inset 0 1rem 1rem -1rem red;

Answer 1

现在你的mixin正在计算:$size -$size。这就是为什么它计算为0rem。

在你的mixin中，如果你写#{-$size}，这将指示编译器直接输出变量而不进行计算。