Question

I’ve been searching all over for an answer to this question for a specific issue I am looking at with SASS. I am wanting to start with an li at 100% opacity but then have it loop through the li’s with certain classes and subtract 5% opacity using the transparentize function. The issue though is the foreach loop, as I don’t know how many li’s with a certain class I’ll have. Let me see if I can explain it with code, basically I’ll show you the long form and if someone can help me convert it into a short foreach that would be great.

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);
    }
}

If I was going to do this in PHP this is how I would do it, I just need the SASS version:

$transparency_increment = .10
foreach( $item as $li ) {
   background-color: transparentize( $red, $transparency_increment);
   $transparency_increment + .10;
}

Hopefully that makes sense, I’m sure I’ll have to use the nth item somewhere since the exact count will be unknown. Thanks for help in advance!

Answer 1

What you’re looking for is the @for control directive

This should do what you want:

$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);
}