Os pré-processadores vieram para que pudéssemos organizar melhor o CSS, evitando velhos hábitos como, por exemplo, escrever tudo em apenas uma folha de estilo ou copiar e colar grandes blocos de código.
Agora vem a polêmica: qual pré-processador utilizar?
Saiba que não existe um melhor ou pior, e sim qual vai melhor se adaptar ao seu modo de desenvolver ou seu projeto. Neste post, eu vou utilizar o Compass, um pré-processador baseado em Sass, mas tudo o que eu vou fazer com ele você vai conseguir fazer utilizando um pré-processador da sua preferência, mudando apenas alguns detalhes e sintaxe.
O primeiro passo é organizar a estrutura de pastas do seu CSS e padronizar o local onde ficará cada folha de estilo e o que cada uma delas vai estilizar. Abaixo está um exemplo de organização de pastas de um projeto simples:
— sass
—- regions
—— _header.scss
—— _footer.scss
—— _sidebar.scss
—- components
—— _block_name.scss
—— _view_name.scss
—— _content_type_name.scss
—- variables
—— _vars.scss
—— _mixins.scss
—— _classes.scss
— main.scss
A idéia é que você crie arquivos ou pastas de acordo com a necessidade do seu projeto. Desta forma, cada arquivo fica responsável por uma parte do site, assim a manutenção fica muito mais fácil e a sua equipe pode trabalhar em arquivos diferentes sem gerar nenhum conflito.
Falando das Pastas:
Regions -> Guarda os arquivos de estilização das regiões do site.
Components -> Guarda os arquivos de estilização de cada componente do site. No caso do Drupal, é comum termos blocos, views e tipos de conteúdo, por isso estes arquivos.
Variables -> Aqui é a onde você precisa ter um cuidado um pouco maior. Vamos arquivo por arquivo.
_vars.scss
Uma grande dor de cabeça do CSS era alterar padrões do site no meio ou no fim do projeto. No Compass você não terá este problema porque pode guardar em variáveis espaçamentos, cores, fontes, breakpoints e etc.
_mixins.scss
Um mixin nada mais é do que uma classe dinâmica. Lembra no CSS quando você tinha que reutilizar alguma classe e mudar apenas alguns detalhes dela, então…
@mixin button($color, $width, $height) {
background-color: $color;
width: $width;
height: $height;
border: 0;
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //para IE8
}
Para utilizar um mixin:
button {
@include button(#FAF2EB,200px,100px);
}
_classes.scss
Não confunda com mixins, neste arquivo também guardamos classes, mas classes comuns e não dinamicas. Tá, mas por que guardar uma classe ? Porque no Compass você pode extendê-la, mas sem passar parâmetros, como nos mixins.
. button {
background-color: #6195ED;
width: 100px;
height: 50px;
border: 0;
}
Para extender uma classe:
button {
@extend .button
}
Por fim, restou apenas o arquivo main.scss. É nele onde ficarão todos os seus outros arquivos, basta importá-los assim:
@import “regions/_header.scss”;
@import “regions/_footer.scss”;
…
É isso, chega de conflitos, manutenção demorada, código duplicado, etc. etc. etc. =]
