Closure Stylesheets do Google facilita a manipulação de código CSS extenso

O Google liberou como open source sob a Licença Apache 2.0, o projeto Closure Stylesheets, que define uma extensão do padrão CSS e oferece ferramentas, para facilitar a manipulação de arquivos CSS extensos.

Parte do pacote Closure Tools e criado em Java, o projeto adiciona variáveis, funções, condicionais e mixins ao CSS. Com o Closure Stylesheets o desenvolvedor trabalha com as Google Stylesheets (GSS), que são processadas pela ferramenta para gerar arquivos CSS padrão, usados por aplicações ou sites web.

Variáveis

Variáveis são definidas usando @def:

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

O CSS resultante para o bloco acima é:

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

Functions

O projeto introduz uma série de funções aritméticas para a manipulação de valores númericos (ex.: medidas em pixels): add(),sub(), mult(), div(), min() e max(). Veja um exemplo com a função add():

@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);

Aqui está o bloco de CSS resultante:

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

Condicionais

O Closure Stylesheets permite o uso de @if, @elseif e @else para a criação de estruturas condicionais baseadas no valor de algumas variáveis.

Mixins

Mixins são estruturas que permitem o reuso de declarações parametrizadas. Veja um exemplo:

@defmixin size(WIDTH, HEIGHT) {
  width: WIDTH;
  height: HEIGHT;
}
.image {
  @mixin size(200px, 300px);
}

Os mixins são especialmente úteis para tratar questões de compatibilidade entre navegadores web:

@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);
}

O código acima gera o seguinte resultado:

.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);
}

O Closure Stylesheets também pode ser usado para concatenar vários arquivos CSS em um só e fazer a minificação do código. A ferramenta faz verificações estáticas na sintaxe e é capaz de inverter valores em expressões (RTL flipping), além de renomear classes.

O Closure Tools, o projeto principal que contém o Closure Stylesheets, traz um compilador, uma biblioteca e templates para a manipulação de grandes aplicações JavaScript. As ferramentas são usadas internamente pelo Google, em produtos como GMail, Google Docs e Google Maps. O projeto foi tornado open source em 2009.