corgrath corgrath - 1 month ago 6
Sass (Sass) Question

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

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

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; }