如何为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被应用，所以它已经失效了。

- Al-76

---

你好，你能提供我们生成的CSS文件吗？ - Jaay

Answer 1

Try this: Fiddle

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

- Ganesh Yadav

---

这个答案对我有用。谢谢你和所有帮助过我的人 :) - Al-76

接受有用的答案。只需点击绿色符号即可进行赞和踩。 - Ganesh Yadav

Answer 2

看起来你在mixin中漏掉了声明box-shadow规则。

应该像这样：

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

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

fiddle

- sol

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));

- Sebastian Heinrich

---

额克斯...谢谢你，但这似乎出了很大的问题 :( - Al-76

Answer 4

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

- Davide Caruso