Combining . (dot) and & (ampersand) in SASS

Question

SASS syntax:

.rule{
    &-first.&-second{
        /*rules*/
    }
}

Generates error "Invalid CSS..."

Expected output:

.rule-first.rule-second{
    /*rules*/
}

Can it be done? How?

Answer 1

You can do this with @at-root and interpolation. You will need to be using a version of SASS that supports those features.

.rule {
    @at-root #{&}-first#{&}-second{
        /*rules*/
    }
}

Outputs to:

.rule-first.rule-second {
  /*rules*/
}

Demo: http://sassmeister.com/gist/f7f9e25a0896e47e0adc