我一直在寻找这个问题的答案,以了解我正在使用 SASS 时遇到的特定问题。我想从 100% 不透明度的 li 开始,然后让它循环遍历具有某些类的 li,并使用透明化函数减去 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
元素,因为确切的计数是未知的。提前感谢您的帮助!
最佳答案
您正在寻找的是 @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);
}
关于css - SASS foreach on li 与某些类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13676383/