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

Just for some comparison, here's [another real-world example using two levels of Nesting](https://git.sr.ht/~ledge/completely-fictional/tree/%C3%B8/item/public/style.scss), but having more properties mixed in, in case that changes the visual weights of things:

Sass:
```scss
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;
 }
}
```

{}-wrapped:
```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;
  }
 }
}
```

@nest-prefixed:
```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;
 }
}
```

As an observation, modifying the Sass to @nest was trivial; I had to add `&` to every selector anyway, and typing an `@nest` in front at the same time was fine. Modifying to the brace-wrapped actually took a little bit of work, and I had to double-check that I'd actually done so correctly afterwards, since it wasn't obvious from trivial inspection that I'd caught all the nesting.

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


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

Received on Friday, 5 November 2021 17:08:27 UTC