Question

I want to do this:

.classname {
  color: red

  a& {
    color: blue;
  }
}

and for it to compile to:

.classname {
   color: red;
}

a.classname {
   color: blue;
}

Is there syntax available to support this? I have tried using a&, #{a&} and the compass function #{append-selector("a", "&")} but they don’t compile, a & does, but results, obviously, in a .classname rather than a.classname.

Answer 1

This isn’t really possible with the nested syntax for SASS. From the SASS reference:

The inner rule then only applies within the outer rule’s selector.

Nested rules are syntactical sugar that makes CSS’s descendent selectors easier to write, since they’re one of the most common CSS constructs. While it’s be nice to use your approach for writing that kind of rule, it’s not what the syntax is designed (or defined) to do.