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

Question

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 1

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}