CODEWITHSUNDEEP
csssass
Tauri28
Tauri28

Reputation: 908

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

SASS syntax:

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

Generates error "Invalid CSS..."

Expected output:

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

Can it be done? How?

Upvotes: 4

Views: 2394

Answers (1)

Steve Sanders
Steve Sanders

Reputation: 8651

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

Upvotes: 6

Related Questions