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でこれを行う場合、これが私が行う方法です。SA​​SSバージョンが必要です。

$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 に答える