less.ruby icon indicating copy to clipboard operation
less.ruby copied to clipboard

Support "conditional selectors" from Modernizr

Open webxl opened this issue 14 years ago • 0 comments

I don't know if "conditional selectors" is the right term, but I'd there to be some way to have all my styles that apply to an element be in the same block/nest, and not have to write separate blocks/nests for conditional modernizr classes.

The issue is summed up nicely here:

http://icanhasweb.wordpress.com/2010/10/30/less-css/

"Although LESS is a joy to use, I do have some problems. For example, consider the code written when using modernizr (a JavaScript-library that enables feature detection of CSS3):

 .rounded_corners (@radius: 5px) {
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
   border-radius: @radius;
 }

 #header {
   .button {
     /* CSS that all browsers supports */
    }
  }
 .borderradius #header .button {
   rounded_corners;
 }

This may seem but a slight irritation, but consider this example if #header parented style for 20+ sub-elements. Add the possibility that I wanted to use other CSS3-properties. I have no answer to how this should be solved, but my 2 cents would be the possibility to write code such as:

#header {
  .button {
    /* CSS that all browsers supports */
    [.borderradius] {
      rounded_corners;
    }
  }
}

This would equal the meaning in the former snippet, but its superior in elegance (at least in my view)."

webxl avatar Mar 30 '11 19:03 webxl