http://lesscss.org/

Instead of having to handle one huge unruly CSS file I sprinkled some utility classes in my templates instead. Presentational hooks, but what can you do? Ease of maintenance was more important.

And yes, I know I’m late to join the party :)

example:
link rel=sass href=layout.sass
link rel=stylesheet href=layout.css

The layout.css would be generated from the layout.sass and used by current browsers. Newer browsers that can handle SASS, when they came across sites with SASS would use that file and disregard the css file.

This way, the new syntax gets standardised instead of 10 different preprecessors, and we can start using it immediately, and don’t have to wait all browsers catch up.

Advantage for us (designers & developers), we get something standardized that we can start using right away, that will save time and make maintenance so much easier.

Advantage for users, smaller files.

SASS also adds a nice bit, the “&” symbol, which lets you reference the parent selector when defining inner selectors, which can be useful for things like pseudo-selectors and browser-specific scoping:

#content {
  width: 30px;
  .msie & {
    width: 35px;
  }
  &:hover {
    color: blue;
  }
}

expands to:

#content {
  width: 30px;
}
.msie #content {
  width: 35px;
}
#content:hover {
  color: blue;
}

Perhaps Eric’s proposal for any-element linking would remove that use case?

More then once I’ve copied the entire contents of reset.css and replaced each selector with some prefix rule, and I really like the idea of being able to do:

#someContainer {@import url(reset.css);}


body.home #content > .entry > {
h1, h2, h3, h4, h5, h6 {...}
}


I’d really rather see CSS variables implemented.

#headline { .span-12, .prepend-5, .append-7, .last, .column }

Semantics + grid = awesome.

But you may be right about the gzip compression. The soria.css file compresses to 6536 bytes from 41374 bytes uncompressed, for 84% compression rate. However, I still perfer the grouping from a readability/maintainability standpoint.

The thing that struck me about it, is that it would work (somewhat) well only for styles that are scooped for certain unique elements. It could do the equivalent of this:

@with #mydiv {
.this { … }
.that { … }
}

But it could not do anything like this:

@with .mykindofdiv {
.this { … }
.that { … }
}

You’d have to add a scooped style element to every single div with the class “mykindofdiv”. That kind of repetition is not the right thing to do.