[css-selectors] Nesting

[tobireif]

In a current project

https://tobireif.com/demos/grid/

I have to write ".layout1" many times:

.layout1 .page {
  grid-template-rows: repeat(3, auto) 1fr;
  grid-template-columns: 1.14fr 1fr;
}
.layout1 .page .heading {
  grid-row: 2;
  grid-column: 1;
}
/* many more times */

Having something like Sass's Nesting

https://sass-lang.com/guide#topic-3

would allow me to write the string ".layout1" only once (ditto for the string ".layout2" and ".layout3").

[tobireif]

Regarding https://tabatkins.github.io/specs/css-nesting/ :

I think I'd prefer a syntax like that of Sass

https://sass-lang.com/guide#topic-3

where it's not necessary to add the ampersand.

[tobireif]

In Sass, the ampersand is available (but not required - that's what I want).

https://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

One of their examples:
(plus my comments)

#main {
  color: black;
  /* ampersand not required: */
  a {
    font-weight: bold;
    /* ampersand can be used when necessary: */
    &:hover { color: red; }
  }
}

is equivalent to this:
(the second part of their example) (their formatting)

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

[tobireif]

Is it a possibility that this might get specd? It's a handy feature, thoroughly prototyped in Sass.

[jonjohnjohnson]

This topic has a previously filed issue with *some discussion happening. You might have more luck closing this issue and contributing over there.

[css-nesting] Status? - #998

[tobireif]

(I should've searched for existing issues before creating one, but anyways for this case I hope that cross-linking will suffice.)

[tobireif]

An earlier nesting ticket: #998

[LeaVerou]

Closing as duplicate. Let's please avoid having multiple threads for the same thing.
@tobireif Please post your use cases in the other thread!

[tobireif]

@LeaVerou I added my comments to your ticket. Thanks for submitting the earlier ticket! I hope the W3C will implement nesting ...