SCSS darken by %

[kaffekop]

Hello :)

I’m pretty new to SCSS and apparently my google-fu is broken.
How do i darken a color, in a for-loop, by +10% ?

$pct: 0;

$snip_bg: #4B8DB5;

@for $i from 1 through 10 {

h2.item_#{$i}

{

background:darken( $snip_bg, PCT_AMOUNT_HERE );

}

$pct: $pct + 10;

}

I’ve tried with {$pct}%, $pct%, #{$pct}% a.s.o. but so far the only thing i’ve managed is a bunch of errors in scoutApp (sass/compass GUI)..

[Senff]

If you replace PCT_AMOUNT_HERE with $pct, (hence, background:darken( $snip_bg, $pct );), the result should be as follows:

h2.item_1 {

background: #4b8db5; }



h2.item_2 {

background: #3c7191; }



h2.item_3 {

background: #2d556d; }



h2.item_4 {

background: #1e3949; }



h2.item_5 {

background: #0f1d25; }



h2.item_6 {

background: #000101; }



h2.item_7 {

background: black; }



h2.item_8 {

background: black; }



h2.item_9 {

background: black; }



h2.item_10 {

background: black; }

Not sure if that’s what you’re after?

[kaffekop]

What the… Now it works, that is very very odd..
I tried a bunch of different versions, but they all failed, but now it seem to work fine :S

Thanks a lot, i must have mistyped something (many times :P)

[Author]

Posts