如何为 CSS 阴影创建 @mixin

Question

我在为投影创建 @mixin 时遇到问题。常规CSS中我想要的阴影如下

-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
 box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);

我创建的@mixin 就是这样；

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

然后为了使用它，我将以下内容添加到我的 scss 文件中

@include box-shadow(0,2px,3px,2px, rgba(0,0,0, 0.2));

但是，它被破坏了，因为我没有看到在编译 SCSS 后应用了任何阴影 CSS。

Answer 1

试试这个：小提琴

@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;
}

.box{
  width:150px;
  height:150px;
  background:blue;
  @include box-shadow(2px,2px,5px,0, rgba(0,0,0,0.6));
}