Early March the first draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors)
This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.
Using the & selector (read this as “the nesting selector”), you can refer to the elements matched by the parent rule:
table.colortable {
& td {
text-align: center;
&.c { text-transform: uppercase }
&:first-child, &:first-child + td { border: 1px solid black }
}
& th {
text-align: center;
background: black;
color: white;
}
}As it’s an actual selector, you always need to use the & selector, so you won’t be able to do this:
/* INVALID */
.foo {
.bar {
color: hotpink;
}
}(The fix would be to write & .bar instead of .bar)
The & selector can also only be used when it’s first compound selector (e.g. it appears at the first position) of an inner selector.
/* INVALID */
.foo {
.bar & {
color: hotpink;
}
}To cater to these scenarios you’ll need to use the @nest rule, which is more lax:
/* VALID */
.foo {
@nest .bar & {
color: hotpink;
}
}To me it feels like this @nest rule should go. The interpreter should be smart enough to figure things out all by itself.
Figure: 
