在薩斯

Question

帶有可變參數列表一個屬性的多個值

我期待有一個mixin像+stacktextshadow(blue, red, green)吐出text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

目前，這是我所：

=stacktextshadow($shadows...) 
    @for $i from 1 through length($shadows) 
    $shadow1: append(1px 1px 0, nth($shadows,1)) 
    $shadow2: append(2px 2px 0, nth($shadows,2)) 
    $shadow3: append(3px 3px 0, nth($shadows,3)) 
    text-shadow: $shadow1, $shadow2, $shadow3 

h1 
    +stacktextshadow(blue, red, green) 

這給了我：

h1 { 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; } 

三倍。我知道爲什麼，因爲它在@for循環中運行了三次text-shadow屬性聲明。我希望它只能這樣做一次。然而，當我把text-shadow出福爾循環的，它並沒有獲得$shadow1，$shadow2等

另外，我想不沿東西線重複自己：$shadow($i): append($i*1px $i*1px 0, nth($shadows,$i))（其顯然不起作用），因此它全部動態完成 - 無論是將一個參數傳遞給mixin，還是20。

Answer 1

您可以在循環外創建一個變量來「收集」影子值，然後使用該變量變量在你的text-shadow屬性中。例如：

=stacktextshadow($shadows...) 
    $all:() 
    @for $i from 1 through length($shadows) 
    $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma) 

    text-shadow: $all 

h1 
    +stacktextshadow(blue, red, green) 

輸出：

h1 { 
    text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }