创建长方体阴影到投影混合

Question

我正在试着写一个mixin，它应该以CSS box-shadow作为参数，并将其转换为filter: drop-shadow()。

// mixin
drop-shadow($shadows)
  $array = split(',', $shadows)
  $dropShadows = ()

  for $shadow in $array
    push($dropShadows, 'drop-shadow(' + $shadow + ')') 

  filter: unquote(join(' ', $dropShadows))

// usage
body
  drop-shadow: 0 0 1px, 0 0 1px

问题是我必须以字符串的形式传递drop-shadow的值才能使它工作，如果我以数组的形式传递它，它就不会...

// works
drop-shadow: '0 0 1px, 0 0 1px'

// doesn't work
drop-shadow: 0 0 1px, 0 0 1px

Answer 1

好了，找到解决方案了：

// custom property (mixin) which allows you to define a box-shadow that will be
// rendered as `filter: drop-shadow()`
//
// usage:
// drop-shadow: 2px 0 1px rgba(0,0,0,0.5)
// => filter: drop-shadow(2px 0 1px rgba(0,0,0,0.5))

drop-shadow()
  $array = arguments
  $dropShadows = ()

  for $shadow in $array
    push($dropShadows, 'drop-shadow(' + $shadow + ')')

  filter: unquote(join(' ', $dropShadows))

这将接受rgb(a)或hsl(a)颜色，其工作方式与box-shadow完全相同。

Answer 2

你要找的Mixin是不是很便宜，粗鲁还是怎么的？

我已经为长方体阴影创建了一个较少的混合，它非常简单

​

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

​

用法：

​

.mybox {
  .box-shadow(0 1px 5px rgba(0,0,0,0.2));
}

​

如果我没有传递任何参数，它会接受默认的参数。

SASS的实现也是类似的。