0

我一直在寻找这个问题的答案，以寻找我正在使用 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某个地方使用该项目，因为确切的计数将是未知的。提前感谢您的帮助！

4

2 回答 2

3

您正在寻找的是@for控制指令

这应该做你想要的：

$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-03T02:51:08.397 回答
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;
}
于 2012-12-03T02:52:16.303 回答