Re: [csswg-drafts] [css-nesting-1] initial idea for nested conditionals (#5645)

• From: Adam Argyle via GitHub <sysbot+gh@w3.org>
• Date: Wed, 28 Oct 2020 16:45:34 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-718063884-1603903533-sysbot+gh@w3.org>

Thanks for requesting clarification on nesting conditionals inside conditionals and posting some pseudo code 🙂 

I'd like to make a spec addition that demonstrates the syntax, here's my current version:

```css
.foo {
  display: grid;

  @media (orientation: landscape) {
    & { 
      grid-auto-flow: column; 
    }

    @media (min-inline-size > 1024px) {
      & {
        max-inline-size: 1024px;
      }
    }
  }
}
/* equivalent to
   .foo { display: grid; }

   @media (orientation: landscape) {
     .foo { 
       grid-auto-flow: column; 
     }
   }

   @media (orientation: landscape) and (min-inline-size > 1024px) {
     .foo { 
       max-inline-size: 1024px;
     }
   }
 */
```

nested conditionals were already triggering nesting, so by putting one a conditional inside a conditional, the `&` sigil resolves to the nearest resolvable selector, in this case `.foo`

less to write, and still consistent with the syntax?

-- 
GitHub Notification of comment by argyleink
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/pull/5645#issuecomment-718063884 using your GitHub account


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

Received on Wednesday, 28 October 2020 16:45:36 UTC