darken background by 4% on @each ul li function? (SCSS)

Question

Using SCSS to make 4 boxed li elements darken their color. I can do this manually with classes but that defeats the purpose of semantics. Trying to create a @for function to handle this but I've not found any resources to do what I need.

This is my desired outcome that I want to automate through SCSS:

HTML:

<ul>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
</ul>

SCSS:

li {
    &.one {
        background: $primary-color
    }
    &.two {
        background: darken($primary-color, 4%);
    }
    &.three {
        background: darken($primary-color, 8%);
    }
    &.four {
        background: darken($primary-color, 12%);
    }
}

There has to be a way to automate this without using classes ... maybe an incremental? Add 4% on ... ? This is where I get lost ...

Can anyone assist and explain their code? I have no idea how to even start.

Is there a reason you want to use `.number` classes instead of `nth-child`? — Nathan Merrill, Oct 23 '15 at 15:39
@cimmanon I want to do this without classes. This is not a duplication. — Alexander Graham, Oct 23 '15 at 15:40
Nth-child: http://stackoverflow.com/questions/5664773/how-can-i-get-the-second-child-using-css You can use the question marked as duplicate and this link to generate what you want. — Nathan Merrill, Oct 23 '15 at 15:42
@cimmanon please correct post to show the alternative question as main, as your marked duplicate question does not provide code for classless elements. — Alexander Graham, Oct 23 '15 at 15:43
I am not obligated to do anything: your question did not clarify what part of the problem you didn't understand (how to use a loop, how to incrementally darken, how to style elements with something other than a class, etc.). — cimmanon, Oct 23 '15 at 15:45
@cimmanon seriously? dude you've caused me problems twice now. I stated in my ask that I want to do this without using a class. **If you feel obligated to edit my post then you need to feel obligated to correct it with the alternative duplicate answer, which I've stated clearly reflects my problem - and solves it**. NOT the duplicate that you inserted first. If you won't fix it I'll get a mod to. This is absurd. — Alexander Graham, Oct 23 '15 at 15:47
@AlexanderGraham, please check here:- https://jsfiddle.net/nikhilvkd/dvzebo2t/ — Krish, Dec 23 '15 at 06:34

darken background by 4% on @each ul li function? (SCSS)

0 Answers0