创建箱子阴影拖放阴影mixin

我想写一个混合，应该采取作为参数CSS box-shadow并将其转换为filter: drop-shadow()。创建箱子阴影拖放阴影mixin

// 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

来源

2016-05-09 Fez Vrasta

-2

的密新你”重新寻找是为了LESS，SASS还是什么？

我已经创建了箱阴影少的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)); 
 
}

如果我不“T传递任何参数，它需要默认参数。

SASS的实现也是类似的。

来源

2016-05-09 12:28:11

我使用'stylus'，它在标签 –

-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

来源

2016-05-09 13:00:23

创建箱子阴影拖放阴影mixin

回答

相关问题