What is the Sass equivalent to this LESS code that applies multiple sub-CSS classes?

Question

This works in LESS:

.block {

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

  // If block has both modifiers
  &--modifer&--modifier2 {
    background: orange;
  }

}

And the last selector becomes (as expected);

.block--modifer.block--modifier2 {
  background: orange;
}

Can be tried here:

http://winless.org/online-less-compiler

But the same code does not work for Sass, which can be tried here:

http://www.sassmeister.com/

Instead you get the error:

Invalid CSS after "&--modifer": expected "{", was "&--modifier2"
"&--modifier2" may only be used at the beginning of a compound selector.

How do you write this simple example with Sass?

Answer 1

You can do like this

Demo - http://www.sassmeister.com/gist/d75b6e741a1ec0d58a544abfc72c6ab7

.block{

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

 &--modifier {
    @at-root &#{&}2 {
        color:orange;
    }
}

}

Output

.block--modifer1 {
  background: red;
}
.block--modifier2 {
  background: blue;
}
.block--modifier.block--modifier2 {
  color: orange;
}

Answer 2

You can easily write it by interpolating the parent selector &.

.block {

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

  // Just interpolate parent selector
  &--modifer#{&}--modifier2 {
    background: orange;
  }

}

Which generates the following css

.block--modifer1 {
  background: red; }

.block--modifier2 {
  background: blue; }

.block--modifer.block--modifier2 {
  background: orange; }