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

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

sass syntax: .rule{ &-first.&-second{ /*rules*/ } }

generates error "invalid css..."

expected output: .rule-first.rule-second{ /*rules*/ }

can done? how?

you can @at-root , interpolation. need using version of sass supports features.

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

outputs to:

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

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

css sass