SASS foreach與某些類的li

我一直在尋找關於這個問題的答案，我正在用SASS看一個特定的問題。我想從100％不透明度開始，然後讓它通過某些類的li循環，並使用透明度函數減去5％的不透明度。這個問題雖然是foreach循環，因爲我不知道我會有多少個li。讓我看看如果我可以用代碼解釋它，基本上我會告訴你長的形式，如果有人能幫我把它轉換成一個很好的短期foreach。SASS foreach與某些類的li

li { 
    ... styles are here ... 

    &.Language { 
     background-color: $red 
    } 

    &.Language.comp-1 { 
     background-color: transparentize($red, 0.10); 
    } 

    &.Language.comp-2 { 
     background-color: transparentize($red, 0.20); 
    } 

    &.Language.comp-3 { 
     background-color: transparentize($red, 0.30); 
    } 

    &.Language.comp-4 { 
     background-color: transparentize($red, 0.40); 
    } 

    &.Language.comp-5 { 
     background-color: transparentize($red, 0.50); 
    } 
}

如果我要做到這一點在PHP中，這是我會怎麼做，我只是需要SASS版本：

$transparency_increment = .10 
foreach($item as $li) { 
    background-color: transparentize($red, $transparency_increment); 
    $transparency_increment + .10; 
}

希望這是有道理的，我想我肯定會必須在某處使用nth項目，因爲確切的計數將是未知的。提前感謝您的幫助！

來源

2012-12-03 gregwhitworth

提取是不是雖然知道上限（10）？任何超過10個的透明度> = 1，都是相同的。 –

是的，我正在使用一個示例 - 我正在考慮將其設置爲5％或更少。我只是不想讓這些類硬編碼，所以如果我將它們移動到最後不會導致不合適的地方。 – gregwhitworth

什麼你要找的是@for control directive

這應該做你想要什麼：

$red: #ff0000; 

@mixin foo($prefix, $num, $step){ 
    @for $i from 1 through $num { 
     #{$prefix}-#{$i} { 
      background-color: transparentize($red, $i * $step); 
     } 
    } 
} 

li { 
    @include foo('&.Language.comp', 10, 0.1); 
}

來源

2012-12-03 02:51:08

未經測試和bootstrap-sass

@mixin transparent_steps_bg($bg_color, $amount, $tranparancy_amount) { 
    @while $amount> 0 { 
    .comp-#{$amount} { background-color: transparentize($bg_color, $amount * tranparancy_amount); } 
    $amount: $amount - 1; 
}

來源

2012-12-03 02:52:16

SASS foreach與某些類的li

回答

相關問題