Grow your CSS skills. Land your dream job.

SCSS darken by %

  • # May 27, 2012 at 4:40 pm

    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)..

    # May 27, 2012 at 4:59 pm

    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?

    # May 27, 2012 at 5:29 pm

    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)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".