X is to CSS what GWT is to Javascript; what is X?

Question

Is there a structured language for declaring styles in a sensible way, which can then be rendered into browser specific css files, similar to what GWT does to Javascript?

It would ideally be a language that supports variables, deals with browser quirks and differences (e.g. filter:alpha vs opacity), provides an intuitive syntax for common tasks such as centering, and has a way to express fallbacks for less capable browsers.

Answer 1

Sass, as in Haml and Sass has some of what you're looking for. It has variables, math, and other goodies.

The official version is Ruby based, but there are versions for other languages like PHP and Python.

It might not do EVERTHING you mentioned, but it's worth checking out.

Answer 2

GWT's ability to generate code on the fly and it's powerful "deferred binding" capability could definately be applied to stylesheets and allow for build-time optimization of CSS.

Right now, the "GWT way", according to styles is to include all the styles you'll need and use apply them by making use of "dependent style names". But this definitely leads to lost of useless CSS being included where it's not needed.

I know there is at least one attempt to optimize CSS at build time. This would involve combining multiple seperate stylesheets into one, and removing all non-essential whitespace (minifying). I think this might also allow you to make use of deffrred binding to essentially "optimize out" CSS from where it's not needed (ex: browser specific styles).

StyleInjector

Answer 3

you might want to try HSS.

Answer 4

Thanks for your comments! Sass and HSS seem very similar in scope: simple and block variables, nested blocks, single line comments. HSS has the advantage of being a superset of CSS.

StyleInjector looks more ambitious and interesting. By leveraging GWT's deferred binding capabilities and introducing CSS syntax extensions like conditionals, this approach should make it easy to define not only browser specific but also locale specific styles. Also being able to reference other GWT resources directly, and automatically minimizing styles by removing and merging selectors is pretty cool. I'll definitely follow this project closely.

Answer 5

To answer my own question (again): Less seems like one of the most interesting projects so far. CSS extension supporting variables, mixins (complex variables), nested rules, and simple arithmetic.