Sass：将两个列表合并为只有一个逗号

我目前正在编写一个混合框架，它允许我使用框阴影层做一个3d框效果。Sass：将两个列表合并为只有一个逗号

是被返回的结果看起来像这样生成的代码：

.someclass { 
    box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891, 
    1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1; 
}

这个代码是从CSS-招数按钮拍摄。

我需要帮助添加/用逗号分隔加入列表：

鉴于以下两个列表：

$bottom: 1px 0 1px $bottomcolor 
$right: 0 1px 1px $rightcolor

我想加入他们得到：

$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

这里的当我使用Sass的内置列表功能时我得到了什么：

append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red 

join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red

来源

2013-01-06 stefan

刚刚意识到，为什么上面的代码并没有因为$下工作和$的权利都没有2D列表，只有列表1D ....

最后我解决我的mixin像这样：

@import compass 

=boxeffect($depth, $bottomcolor, $rightcolor) 

    $layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor 

    @for $i from 1 through $depth 
     $layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma) 
     $layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma) 

    +box-shadow($layers) 


.test 
    +boxeffect(2, #222222, #333333)

与成果：

/* line 18, ../sass/temp.sass */ 
.test { 
    -webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333; 
    -moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333; 
    box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333; 
}

来源

2013-01-06 15:10:12 stefan

这工作，以及：

$cat:(); 
$a: 1px 0px url(http://domain.com); 
$b: 0px 1px #bbb; 
$cat: append(unquote($a), $b, comma);

希望这有助于。

来源

2013-10-15 12:56:52 nunobaba

Sass：将两个列表合并为只有一个逗号

回答

相关问题