treehouse : what would you like to learn today?
Web Design Web Development iOS Development

LESS: Background color inheritance

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

  • Hmmmm... pretty sure you'd have to specify each one.
  • 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!!
  • 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.