如何创建CSS阴影@mixin？现有@mixin编译后无效果求助

嘿，我一眼就看出问题啦——你定义的@mixin box-shadow只是声明了参数，但内部完全是空的，没有任何输出CSS属性的代码，所以编译后自然不会生成你想要的阴影样式！

下面是修复后的完整方案：

正确的Mixin 写法 #

把你需要的三个浏览器前缀的阴影属性都放进mixin里，用你定义的参数替换固定数值：

@mixin box-shadow($top, $left, $blur, $size, $color) {
  -webkit-box-shadow: $top $left $blur $size $color;
  -moz-box-shadow: $top $left $blur $size $color;
  box-shadow: $top $left $blur $size $color;
}

调用方式（和你之前的写法一致即可） #

.your-target-element {
  @include box-shadow(0, 2px, 3px, 2px, rgba(0, 0, 0, 0.2));
}

编译后的CSS结果 #

这样处理后，编译工具就会生成你需要的完整阴影代码：

.your-target-element {
  -webkit-box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
}

额外小提示 #

现在大部分现代浏览器已经原生支持标准的box-shadow属性，不需要-webkit-和-moz-前缀了。如果你的项目只需要兼容现代浏览器，可以简化mixin：

@mixin box-shadow($top, $left, $blur, $size, $color) {
  box-shadow: $top $left $blur $size $color;
}

内容的提问来源于stack exchange，提问作者Al-76