More Blogs from Google

Archive

When the Closure Tools were first released a little over two years ago, they gave web developers the ability to organize and optimize their JavaScript and HTML in a new way. But there was something missing, namely, a tool to help manage CSS.

You see, the nature of CSS runs contrary to the DRY principle that is exhibited in good software engineering. For example, if there is a color that should be used for multiple classes in a stylesheet, a developer has no choice but to copy-and-paste it everywhere because CSS has no concept of variables. Similarly, if there is a value in a stylesheet that is derived from other values, there is no way to express that because CSS also lacks functions. Common patterns of style blocks are duplicated over and over because CSS has no macros. All of these properties of CSS conspire to make stylesheets extremely difficult to maintain.

To this end, we are excited to introduce the missing piece in the Closure Tools suite: Closure Stylesheets. Closure Stylesheets is an an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. As the existing Closure Tools have done for JavaScript and HTML, Closure Stylesheets will help you write CSS in a maintainable way, while also empowering you to deliver optimized code to your users. We hope you enjoy it! Please let us know what you think in the discussion forum.

because Less wasn't invented at Google! Seriously though, this cathedral approach to open source really hurts the community. If closure CSS was developed in the open than less might be better or vice versa.

"It's not as if Google decided they should release a LESS/SASS competitor and decided to go and build one last month. Take a look at the copyrights -- some of these files date back to 2005/2006. (You don't see quite so many of the earlier copyrights because there was a first version of GSS that was used for awhile, but has gradually been replaced with the current version, so the old version was kept out of this release so that the external release is cleaner and more coherent.) That means that this project was started over five years ago, and like other Closure Tools, was developed directly in response to the needs of Google projects. Originally, I believe the goal was mainly CSS minification, but later projects, such as themes in Gmail (http://gmailblog.blogspot.com/2008/11/spice-up-your-inbox-with-colors- and.html) shifted the demands of Closure Stylesheets."

I haven't found a specification for GSS. Do you support hierarchies? I find this feature of SCSS very useful for mobile development, where you always should keep several slightly different versions of styles in front of your eyes.

CSS support is nice. I took a quick scan through the documentation and my initial reaction is that LESS is more elegant and CSS-like. I'd like to see a more thorough comparison of the two, to see what Google's Closure does that LESS can't do (and vice versa).

One thing that jumped out at me in Closure is conditionals; Closure can produce separate CSS output files to target different browsers, while LESS requires you to pack everything into a single output CSS file.

So if you wanted to produce separate mobile and desktop output CSS from the same source GSS files, you can. (For example, nearly all mobile browsers are very modern and don't require legacy hacks for IE or old Firefox compatibility, so you might be able to shave a few kb off by deleting those parts.)

Thank you, and Google for open sourcing such an amazing set of tools for web-app developers. I think current web-app developers do not yet appreciate the full value these tools represent because they are not trying to write large scale client side applications. Your hard work will be fully appreciated as client apps get fatter in the future.

Also, thanks for writing the Closure book! I look forward to seeing the second edition!