W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2020

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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:21 UTC