BT

Google Closure Stylesheets Makes It Easier to Work with CSS

by Abel Avram on Nov 12, 2011 |

Google has open source under Apache License 2.0 Closure Stylesheets, a utility belonging to the Closure Tools package and useful when dealing with CSS. Closure Stylesheets is a Java program adding variables, functions, conditionals and mixins to CSS, making it simpler to work with large CSS files. The developer works with Google stylesheets (GSS) that are processed by the tool which generates the actual CSS files used by a web application or a website.

Variables

Variables are defined using ‘@def’. Following is a simple example showing the use of variables:

@def BG_COLOR              rgb(235, 239, 249);
@def DIALOG_BG_COLOR BG_COLOR; body {
background-color: BG_COLOR;
}

.dialog {
background-color: DIALOG_BG_COLOR;
}

The resulting CSS is:

body {
background-color: #ebeff9;
}
.dialog {
background-color: #ebeff9;
}

Functions

Closure Stylesheets introduces a number of arithmetic functions that can operate on numerical values, such as pixels: add(), sub(), mult(), div(), min(), and max(). An example of using these functions looks like this:

@def LEFT_WIDTH    100px;
@def LEFT_PADDING 5px;
@def RIGHT_PADDING 5px; .content {
position: absolute;
margin-left: add(LEFT_PADDING,
LEFT_WIDTH,
RIGHT_PADDING,
px);

The resulting CSS block is:

.content {
position: absolute;
margin-left: 110px;
}

Conditionals

Closure Stylesheets allows the use of @if, @elseif and @else in creating conditional branches based on the value of some variables.

Mixins

Mixins are constructs for reusing parameterized declarations as in the next example:

@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}

.image {
@mixin size(200px, 300px);
}

Mixins are more useful when addressing cross-browser issues:

@defmixin gradient(POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {
background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Chrome 10+,Safari 5.1+ */
/* @alternate */ background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */
/* @alternate */ background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* IE10 */
/* @alternate */ background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Opera 11.10+ */
}

.header {
@mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);
}

Resulting in:

.header {
background-color: #f07575;
background-image: -webkit-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -moz-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -ms-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -o-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
}

Closure Stylesheets can also be used to concatenate multiple CSS files into one and to minify them, it performs static checks on the syntax, knows how to exchange left values with right ones (RTL flipping), and how to rename classes.

Closure Tools is a set of utilities comprising Compiler, Library and Templates, used internally by Google for GMail, GDocs and Maps, and open sourced in 2009. These help dealing with large JavaScript applications.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

LESS, SASS by Werner Schuster

Seems like Google's version of LESS or SASS:
www.infoq.com/news/2009/07/dry-css-less-yass
Except that their compilers/translators are written in JS.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT