Como Usar Sass Para Desenvolver Um Projeto Com Múltiplos Temas

() translation by (you can also view the original English article)

O fluxo de trabalho de um desenvolvedor front-end tem sofrido grandes mudanças recentemente. Mais complexidade, requisitos complicados e maiores projetos nos movem em direção a novas tecnologias tais como os pré-processadores. Pessoalmente, eu amo meu fluxo de trabalho utilizando pré-processadores e não gostaria de deixar de lado o Sass nos meus projetos hoje em dia - sem isso, eu estaria perdido.

Uma situação em particular onde o Sass têm me ajudado é em criar um simples e consistente código front-end que pode ter diferente temas - alterando cores, imagens ou fontes com facilidade. Hoje eu vou descrever meu fluxo de trabalho e eu espero que você leve algo útil daqui.

Estrutura Básica

Aqui está a estrutura de um projeto de exemplo. Você pode usar qualquer partial que você acredita que deva ser incluído. O segredo é ter pastas separadas para os temas e um novo arquivo .scss para cada um deles.

Estrutura de Pastas

|- _scss/
|-|- _base/
|-|-|- _config.scss

|-|- _layouts/
|-|-|- _l-grid.scss
|-|-|- _l-default.scss

|-|- _modules/
|-|-|- _m-accordions.scss
|-|-|- _m-teasers.scss

|-|-_themes/
|-|-|- _light-theme/
|-|-|-|- light.scss

|-|- application.scss

Criar o Base com um Arquivo Principal

No arquivo application.scss você importa todos os seus partials, ignorando a pasta _themes/ nesse momento. Isso cria a fundação para que possamos criar temas diferentes.

@charset 'UTF-8';

// 1.Base
@import '_base/_config.scss';

// 2.Layouts
@import '_layouts/_l-grid',
        '_layouts/_l-default';

// 3.Módulos
@import '_modules/_m-accordions',
        '_modules/_m-teasers';

Configuração

Cores, Fontes e muito mais

Configurar seu projeto é muito importante. Aqui as variáveis vem para nos salvar, nos permitindo setar padrões e então sobrescrever seus valores na camada do tema na sequência. Aqui você pode ver que eu setei algumas variáveis para cores, fontes e configurações de borda.

Para mais detalhes sobre nomeclatura de variáveis, dê uma olhada no artigo de Jim Nielsen Quick Tip: Name Your SASS Variables Modularly.

@charset "UTF-8";

// Cores
$black: #000;
$white: #fff;
$red: #e2061c;
$gray-light: #c9c8c8;
$gray: #838282;
$gray-dark: #333333;
$blue: #253652;

// Corp-Cores
$corp-color: $blue !default;
$corp-color-dark: darken($corp-color, 15%) !default;
$corp-color-second: $red !default;
$corp-color-second-dark: darken($corp-color-second, 15%) !default;

// Fonte
$base-font-size: 1.8 !default;
$base-font-family: Helvetica, Arial, Sans-Serif !default;
$base-font-color: $gray-dark !default;

// Borda
$base-border-radius: 2px !default;
$rounded-border-radius: 50% !default;
$base-border-color: $gray !default;

O segredo para essa etapa é usar a flag !default depois das declarações de variáveis. Fazer isso permite você sobrescrever elas nos arquivos do tema .scss; o !default efetivamente diz "use esse valor se não estiver definido em nenhum outro lugar".

Background-Images

Muitas vezes desenvolvedores não criam variáveis para imagens, ao invés disso escrevem urls diretamente nos seletores. Uma abordagem que eu gosto é remover todos os caminhos nas partials e colocar eles no arquivo de configuração como variáveis. Isso vai tornar sua vida mais fácil e o projeto fácil de manter.

1	// Imagens
2	$sprite: '../images/base/sprite.png' !default;
3	$colorbox-background: '../images/base/colorbox-background.png' !default;

Exemplo de um Módulo Básico

Aqui você pode ver algumas variáveis de background em ação. Este é um partial modular para um accordion, fazendo uso da variável global $sprite, mas também setando e usando a variável $accordion-bgcolor que é específica para o módulo.

// 1.Configuração
$accordion-bgcolor: $gray !default;

// 2.Base
.m-accordion {
    padding: 20px;
    background: $accordion-bgcolor;
}
.m-accordion__trigger {
    background: url($sprite) no-repeat;
}

Como Criar um Tema

No seu arquivo de tema (como o _themes/_light-theme/light.scss da estrutura de exemplo acima) importe o application.scss que contém todos os módulos, layouts e assim por diante. Esta é a base para tudo; com um tema nós vamos colocar a segunda camada por cima disso. Nada mais. Uma vez que você importou application.scss adicione as mesmas variáveis usadas mais cedo, mas defina valores específicos para esse tema.

Usando essa técnica, se nós adicionarmos novos módulos para a base do projeto nós vamos automaticamente (e inofensivamente) compilar eles em todos os nossos temas.

@charset 'UTF-8';

// 1.Sobrescrevendo coisas
$corp-color: $gray;
$corp-color-darken: darken($corp-color, 10%);
$corp-color-second: $blue;
$corp-color-second-dark: darken($corp-color-second, 10%);
 
$base-font-size: 1.6;
$base-font-family: Droid Sans, Georgia, Arial;
 
$base-border-radius: 0px;
$base-border-color: $gray-light;
 
// Imagens
$sprite:              '../images/light/sprite.png';
$colorbox-background: '../images/light/colorbox-background.png';
 
$accordion-bgcolor: $gray-light;

// 2. Importando o tema básico
@import '../../application';

Observando mudanças em múltiplos arquivos no Sass

O último passo é compilar o Sass para CSS e ter dois arquivos diferentes para usar. Nós devemos compilar application.scss e o light.scss. Usando a linha de comando, você ficaria com algo como:

1	sass --watch
2	YOUR/PATH/application.scss:YOUR/CSSPATH/application.css
3	YOUR/PATH/_themes/_light-theme/light.scss:YOUR/CSSPATH/light.css

Se você usa uma app como CodeKit, ou Prepros App, compilar será um processo mais visual.

Inclua o arquivo light.css no head da sua página e dê uma olhada no seu novo website.

Conclusão

Como você pode ver, é útil e simples ter múltiplos arquivos de tema, todos baseados numa fundação consistente. Fique a vontade para fazer perguntas ou mandar feedback e compartilhe suas experiências conosco nos comentários.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!