我一直在寻找有关此问题的答案,以寻找我正在使用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项,因为确切的计数是未知的。预先感谢您的帮助!

最佳答案

您要查找的是@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);
}

09-17 21:11
查看更多