Forums

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)

treehouse : what would you like to learn today?

Forums

[Solved] SCSS darken by %