BT

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

por Abel Avram , traduzido por Leonardo Galvão em 14 Nov 2011 |

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.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dê sua opinião
Feedback geral
Bugs
Publicidade
Editorial
Marketing
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2016 C4Media Inc.
Política de privacidade
BT

We notice you’re using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.