CSS3使用触笔的立体阴影效果混合

CSS3使用触笔的立体阴影效果混合,css,stylus,Css,Stylus,所以我想实现一个阴影效果,就像这里看到的那样: 但是我想创建一个mixin,它允许我指定放置阴影的长度,我的第一种方法是: solidShadow(size, color = #000) shadows = '0px 0px #000' for n in size shadows += ', ' + n + 'px ' + n + 'px ' shadows += color return shadows 被称为box shadow so

所以我想实现一个阴影效果,就像这里看到的那样:

但是我想创建一个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';

如果单引号不在此处,则该选项将正常工作

明白了!答案是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)