[nesting] Placing the ampersand not just at the front of the selector.

[trusktr]

From the spec:

.foo {
  color: red;
  .bar & { color:blue; }
}
/* Invalid because & isn’t in the first compound selector */

What if we want to do something like in Sass:

a {
  color: deeppink;

  .sidebar & {
    color: cyan;
  }
}

This inversion of control is important for making components that are designed to be used in many places and/or under various conditions, instead of components designed to be used in specific places or components that are the same elements but aren't the same component depending on location.

For example, let's say that instead of using non-scalable media queries, we implement a JavaScript version that solves the infinit loop problem, and it places class names on the html element like class="sm" or class="xl"

Then, we could do with CSS what Sass libraries like include-media allow:

a {
  color: deeppink;

  html.sm & {
    color: cyan;
  }

  html.xl & {
    color: yellow;
  }
}

which is super useful because it allows us to easily colocate component code (with media queries inside of them), rather than splitting up component code across media queries (un-colocating component code).

[tabatkins]

That's exactly what @nest is for.

[trusktr]

Oops, I didn't read far enough. An escape hatch for full features, cool!