css - 使用手写笔的 CSS3 实体阴影效果 mixin

Question

所以我想实现像这里看到的那样的阴影效果：http: //zurb.com/playground/css-boxshadow-experiments#peri-table

但我想创建一个允许我指定投影长度的 mixin，我的第一种方法是：

solidShadow(size, color = #000)
    shadows = '0px 0px #000'
    for n in size
        shadows += ', ' + n + 'px ' + n + 'px '
        shadows += color
    return shadows

被称为box-shadow solidShadow(1..3)这“有效”，但实际输出是

-webkit-box-shadow:'0px 0px #000, 1px 1px #000, 2px 2px #000, 3px 3px #000';
box-shadow:'0px 0px #000, 1px 1px #000, 2px 2px #000, 3px 3px #000';

如果单引号'不存在，这将正常工作。

Answer 1

知道了！答案是 unquote() 函数，所以它最终看起来像这样。

solidShadow(size, color = #000)
    shadows = '0px 0px #000'
    for n in size
        shadows += ', ' + n + 'px ' + n + 'px '
        shadows += color
    return unquote(shadows)

并被称为box-shadow solidShadow(1..3)