BT
x Por favor preencha a pesquisa do InfoQ !

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

Percebemos que você está utilizando um bloqueador de propagandas

Nós entendemos porquê utilizar um bloqueador de propagandas. No entanto, nós precisamos da sua ajuda para manter o InfoQ gratuito. O InfoQ não compartilhará seus dados com nenhum terceiro sem que você autorize. Procuramos trabalhar com anúncios de empresas e produtos que sejam relevantes para nossos leitores. Por favor, considere adicionar o InfoQ como uma exceção no seu bloqueador de propagandas.