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是LESS，SASS还是什么？

我为盒子阴影创建了一个LESS mixin，它非常简单

＆＃13;

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

＆＃13;

用法：

＆＃13;

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

＆＃13;

如果我没有通过任何参数，则需要默认参数。

SASS的实施也类似。

创建box-shadow到drop-shadow mixin

2 个答案: