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

试试这个：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));
}

Answer 2

看起来你已经在你的mixin中声明了box-shadow规则。

它应该是这样的：

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

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

fiddle

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规则提供了很多混合，包括 box-shadow 。它还在使用mixin时透明地添加跨浏览器前缀。

如何为CSS drophadow创建@mixin

4 个答案: