css - 创建 box-shadow to drop-shadow mixin

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 一样工作