css - Create box-shadow to drop-shadow mixin -
i'm trying write mixin should take argument css box-shadow
, convert filter: drop-shadow()
.
// mixin drop-shadow($shadows) $array = split(',', $shadows) $dropshadows = () $shadow in $array push($dropshadows, 'drop-shadow(' + $shadow + ')') filter: unquote(join(' ', $dropshadows)) // usage body drop-shadow: 0 0 1px, 0 0 1px
the problem must pass value of drop-shadow
string make work, if pass array, doesn't...
// works drop-shadow: '0 0 1px, 0 0 1px' // doesn't work drop-shadow: 0 0 1px, 0 0 1px
ok, found solution:
// custom property (mixin) allows define box-shadow // rendered `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 = () $shadow in $array push($dropshadows, 'drop-shadow(' + $shadow + ')') filter: unquote(join(' ', $dropshadows))
this accept rgb(a) or hsl(a) colors , works box-shadow
Comments
Post a Comment