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：將兩個列表合併爲只有一個逗號

回答

相關問題