Re: [csswg-drafts] [css-nesting] Syntax suggestion (#4748)

Is there an issue with choosing *one* of either `@nest` and `&`, and requiring that `&`/`@nest` starts every nested selector list? Supporting selectors that *don't* start with `&`, like `.wysiwyg &` seems like a really niche use-case, based on my experience with pre-processors (I would be surprised to find any major project that used it extensively).

That is, why not just take

```sass
figure {
 border: 1px solid transparentize($grey, 0.69);
 border-radius: 0.23rem;
 display: flex;
 flex-direction: column;
 margin: 0 auto;
 margin-bottom: 0.23rem;
 padding: 0.46rem;
 text-align: center;

 > audio {
  order: 2;
  width: 100%;

  + figcaption {
   order: 1;
   margin-bottom: 0.23rem;
   margin-top: 0;
   text-align: left;
  }
 }

 > figcaption {
  color: #666;
  font-size: 0.69rem;
  margin-top: 0.69rem;
 }

 > video {
  + figcaption {
   margin-top: 0;
  }
 }

 + figure {
  margin-top: 0.46rem;
 }
}
```

and translate it to either

```css
figure {
 border: 1px solid transparentize($grey, 0.69);
 border-radius: 0.23rem;
 display: flex;
 flex-direction: column;
 margin: 0 auto;
 margin-bottom: 0.23rem;
 padding: 0.46rem;
 text-align: center;

 & > audio {
  order: 2;
  width: 100%;

  & + figcaption {
   order: 1;
   margin-bottom: 0.23rem;
   margin-top: 0;
   text-align: left;
  }
 }

 & > figcaption {
  color: #666;
  font-size: 0.69rem;
  margin-top: 0.69rem;
 }

 & > video {
  & + figcaption {
   margin-top: 0;
  }
 }

 & + figure {
  margin-top: 0.46rem;
 }
}
```

(if you like sigils)

or 

```css
figure {
 border: 1px solid transparentize($grey, 0.69);
 border-radius: 0.23rem;
 display: flex;
 flex-direction: column;
 margin: 0 auto;
 margin-bottom: 0.23rem;
 padding: 0.46rem;
 text-align: center;

 @nest > audio {
  order: 2;
  width: 100%;

  @nest + figcaption {
   order: 1;
   margin-bottom: 0.23rem;
   margin-top: 0;
   text-align: left;
  }
 }

 @nest > figcaption {
  color: #666;
  font-size: 0.69rem;
  margin-top: 0.69rem;
 }

 @nest > video {
  @nest + figcaption {
   margin-top: 0;
  }
 }

 @nest + figure {
  margin-top: 0.46rem;
 }
}
```
(for those that don't like sigils)

-- 
GitHub Notification of comment by nightpool
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4748#issuecomment-965490263 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 10 November 2021 16:08:47 UTC