How to do multiple class selectors in Stylus CSS pre-processor

css stylus

Jim · Oct 17, 2013 · Viewed 7k times · Source

How do you do/can you do this in Stylus

.classA.classB {
    color: red;
}

Note, I do mean .classA.classB not .classA .classB (they're different)

I thought this would do it

.classA
    .classB
        color red

But that does this (which makes sense I guess)

.classA .classB{color:#f00}

I realise I can do this

.classA.classB
    color red

But that doesn't feel very "Stylus" and would become clumsy as/if you nested further

Thanks Jim

Answer

You should use parent reference there — use an ampersand symbol (&) to define where the parent selector would go:

.classA
    &.classB
        color red

this would render to

.classA.classB{color:#f00}