我一直在寻找这个问题的答案,以解决我在SASS看到的具体问题。我希望从100%不透明度的li开始,然后让它循环使用某些类的li并使用transparentize函数减去5%的不透明度。然而问题是foreach循环,因为我不知道我将拥有一定数量的li。让我看看我是否可以用代码来解释它,基本上我会告诉你长形式,如果有人可以帮助我将它转换成一个很好的简短的foreach。
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
项目,因为确切的计数将是未知的。提前感谢您的帮助!
答案 0 :(得分:3)
您正在寻找的是@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);
}
答案 1 :(得分:0)
未经测试并从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;
}