Grow your CSS skills. Land your dream job.

LESS: Background color inheritance

  • # October 10, 2011 at 10:34 pm

    Hey everyone.

    I’ll cut to the chase.. I’m using LESS for the first time and trying to figure out something which seems pretty straight forward, but is proving not to be.

    I have a 8 sections, each with their own unique background color. Inside each section is a link. I want this link to inherit the background color of its parent section. I then want to saturate it by 20%. Something like this:


    section a{
    background: saturate(@parent-bg-color, 20%);
    }

    Can I do this without having to specify background colors for each one? I’d like to avoid this:


    section#one a{
    background: saturate(@section1-color, 20%);
    }
    section#two a{
    background: saturate(@section2-color, 20%);
    }
    section#three a{
    background: saturate(@section3-color, 20%);
    }
    etc.. etc..

    # October 11, 2011 at 2:22 pm

    Hmmmm… pretty sure you’d have to specify each one.

    # October 11, 2011 at 5:29 pm

    Hey Doc, cheers for the reply. I guess I was hoping there was some secret LESS magic which would let me do that without having to specify, but I think I was just getting greedy! I suppose I’ll have to resort to the “old school CSS” way of doing things!!

    # October 11, 2011 at 6:23 pm

    Well, to be fair, I don’t really know too much about LESS – so maybe there is something in there that I’m unaware of.

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

You must be logged in to reply to this topic.

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