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}，这将指示编译器只输出变量而不进行计算。