add a nested syntax

[Matthias-Hermsdorf]

Hello,

in LESS I'm able to write media query inside of declaration blocks.

div {  
 color: green;
 @media (min-width: 500px) {  
    color: red;  
  }  
}  

compiles to

div { color: green;}
@media (min-width: 500px) {  
  div { color: red; }  
}

In element queries this could be a nice shortcut because if removes the doubled selector declaration.

  ul { 
    padding: 5px;  
    @element (min-width: 500px) {  
       padding: 10px;  

      li { padding: 1px;}  
    }  
  }  

What do you think of it?

[tomhodgins]

Hi Mathias!

Thanks for your interest and checking it out. There are a couple of things going on here I'll try to separate :)

First there is a proposal for Nesting in native CSS. I wonder how this feature would affect writing supported at-rules, like media queries, or element queries if they were part of CSS. Because there's already a separate nesting idea being worked on I feel like adding nesting to this spec as well would make it bigger and partly redundant. And I fear with style scoping + element queries + nesting in CSS it would be far less likely to ever be approved/supported.

However I am curious to see if tools like Less, SCSS, or Stylus could be made aware of the element query syntax and be used to write styles like the examples you have given and have Less output valid element queries! Is there a way support could be added from the preprocessor end to allow you to author styles this way?

[Matthias-Hermsdorf]

You are right. The Compiler could be a possible place.

The @nest Rule is new for me. I meant the & things and the @media.

I've read about http://cssnext.io/features/#nesting and following to https://github.com/postcss/postcss#readme .
I'm not sure, but the "post" sounds like: write your plugin and polyfill the css until the element queries spec is supported by the major browser vendors :-)

The nesting in CSS could get messy. But everything will get messy when playing with all toys at once.