css - 如何为 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));
}

Answer 2

看起来你没有box-shadow在你的 mixin 中声明规则。

它应该如下所示：

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

根据需要添加供应商前缀。

小提琴

Answer 3

我用这个

/* BOXSHADOW */
@mixin boxshadow(@x: 0, @y: 0, @blur: 0, @spread: 0, @rgba: rgba(0, 0, 0, 1.0)) {
  -webkit-box-shadow: @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  -moz-box-shadow:    @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  box-shadow:         @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
}

@include boxshadow(0, 0, 10, -5, rgba(220, 220, 220, 1.0));

Answer 4

您可以尝试使用Compass。它为最常见的 CSS 规则提供了很多 mixin，包括box-shadow。它还在使用其 mixin 时透明地添加跨浏览器前缀。