Trabalhando com pré-processadores de CSS

Introdução

Se você já tiver experiência com desenvolvimento frontend com certeza já deve ter ouvido falar de pré-processadores de CSS. Hoje é muito comum no dia-a-dia de desenvolvedores frontend utilizar algum tipo de pré-processador de CSS, são muitas as vantagens de se utilizar um, a principal delas é que eles agilizam a escrita de código CSS.

Temos três diferentes pré-processadores de CSS, o LESS, o SASS (que possui a variação de sintaxe SCSS) e o Stylus, cada um com as suas particularidades, mas todos tem o objetivo de agilizar a escrita de código CSS, mas como eles nos auxiliam?

Vamos listar abaixo algumas dessas vantagens e mostrar exemplos de código utilizando a sintaxe SCSS do SASS, mas todos os exemplos aqui demonstrados são suportados por todos os pré-processadores.

Uso de variáveis

Já faz algum tempo que é possível utilizar variáveis no CSS, mas esse foi um dos problemas que os pré-processadores vieram resolver.

É bem comum não lembrarmos de cabeça os códigos hexadecimais das cores, por exemplo, o código hexadecimal de um dos tons de amarelo que utilizamos aqui no site do Elo7 é #fba702, esse tom se repete em diversos locais do site, sendo assim, com CSS tradicional, cada vez que formos utilizar essa cor teremos que utilizar o código hexadecimal.

a.button {
    border: 1px solid #fba702;
    color: #fba702;
}

a.button:hover {
    background: #fba702;
}

Mas ainda que esse tom se repita em diversos lugares, fica difícil memorizar o código hexadecimal, então, não seria mais fácil, ao invés de usar o código hexadecimal, definir um nome para a cor? Isso é uma vantagem de utilizarmos variáveis, basta nomear com um nome que fique claro e atribuir a essa variável o código hexadecimal, assim, sempre que formos utilizar a cor, basta usar a variável, abaixo alguns exemplos de uso.

Exemplo usando SCSS.

$yellow: #fba702;

a.button {
    border: 1px solid $yellow;
    color: $yellow;
}

a.button:hover {
    background: $yellow;
}

Exemplo usando LESS.

@yellow: #fba702;

a.button {
    border: 1px solid @yellow;
    color: $yellow;
}

a.button:hover {
    background: @yellow;
}

Exemplo usando Stylus.

yellow = #fba702

a.button 
    border 1px solid yellow
    color yellow

a.button:hover 
    background yellow

Observação: Para declarar uma variável no SASS/SCSS é necessário colocar um cifrão ($) na frente do nome, no LESS usamos @ (arroba), já no Stylus não é necessário usar um sinal para declarar uma variável, a diferença é que ao invés de dois pontos (:) usa-se o sinal de igual (=) para atribuir o valor e sem ponto e vírgula (;) no final.

Note no código acima que criamos a variável com o nome yellow e atribuímos a ela o código hexadecimal do tom de amarelo, assim, sempre que precisarmos utilizar esse tom de amarelo, utilizaremos a variável e não mais o código hexadecimal.

Usar variáveis para cores é o exemplo mais comum do uso de variáveis, mas é possível utilizar variáveis para tamanhos também, assim como strings para usar como font-family, por exemplo.

Encadeamento

Uma outra grande vantagem de utilizar pré-processadores é o encadeamento de código, muito comum quando precisamos estilizar elementos filhos, por exemplo, suponhamos que temos a seguinte estrutura de código HTML.

<nav>
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
    </ul>
</nav>

Agora vamos estilizar os elementos com CSS puro.

nav {
    display: flex;
}

nav ul {
    list-style: none;
}

nav ul li {
    margin-bottom: 10px;
}

nav ul a {
    text-decoration: none;
}

Observe que há muita repetição de código, ou seja, para estilizar cada elemento, é necessário ficar repetindo toda a estrutura, agora utilizando um pré-processador conseguimos usar uma estrutura encadeada, vamos reescrever o código de CSS acima com SCSS.

nav {
    display: flex;
    
    ul {
        list-style: none;
        
        li {
            margin-bottom: 10px;
        }
            
        a {
            text-decoration: none;
        }
    }
}

Perceba que o ganho aqui não é em redução de linhas, mas sim em não ter que ficar repetindo toda a estrutura para estilizar os elementos, ou seja, para estilizar a tag <ul> que é elemento filho da tag <nav>, basta colocar a estilização da tag <ul> dentro da estilização da tag <nav>. Quando esse código for compilado para CSS, ficará exatamente como mostrado acima no exemplo em CSS.

Em todos os pré-processadores é possível usar encadeamento, no SASS e no Stylus a diferença é que não é necessário o uso de chaves ({}) e ponto e vírgula (;).

Estilizando pseudoelementos e/ou pseudoclasses

E como funciona no caso de pseudoelementos e/ou pseudoclasses, por exemplo, se desejamos estilizar um link quando passar o mouse em cima (:hover)? É bem simples, vamos usar como exemplo o trecho de código acima aplicando uma estilização no :hover.

a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

Para estilizar um pseudoelemento e/ou pseudoclasse, basta colocar um e comercial (&) seguido de dois pontos (:) e o tipo dentro da estilização do elemento, vale também para todos os outros tipos, tais como :first-child, :last-child, :focus, :after, :before etc.

Da mesma forma, quando quisermos estilizar múltiplas classes, também usamos o e comercial (&), exemplo.

<button class="btn btn-small"></button>
<button class="btn btn-large"></button>

.btn {
    background: red;
    color: white;

    &.btn-small {
        font-size: 14px;
        padding: 16px;
    }

    &.btn-large {
        font-size: 18px;
        padding: 20px;
    }
}

O código acima compilado para CSS ficará assim.

.btn {
    background: red;
    color: white;
}

.btn.btn-small {
    font-size: 14px;
    padding: 16px;
}

.btn.btn-large {
    font-size: 18px;
    padding: 20px;
}

No LESS e no Stylus também usa-se o e comercial (&) para estilizar pseudoelementos e/ou pseudoclasses e múltiplas classes.

Mixins

Outra vantagem de utilizar pré-processadores são os mixins, eles são como funções, podem receber argumentos e eles tornam o nosso código mais flexível, vamos ver um exemplo prático.

Se em muitos lugares você precisa definir o tamanho e o peso da fonte e a altura da linha, você pode criar um mixin para não ter que ficar repetindo as propriedades font-size, font-weight e line-height;

@mixin font($fs: 16, $fw: 300, $lh: 24) {
    font-size: #{$fs}px;
    font-weight: $fw;
    line-height: #{$lh}px;
}

No trecho de código acima, além de mostrarmos como criar um mixin, também estamos mostrando como definir valores padrões para os argumentos e como funciona a concatenação. Agora, para usarmos esse mixin, se quisermos usar os valores padrões, basta dar um include do mixin sem passar argumento.

.my-class {
    background-color: red;
    color: white;
    padding: 12px 16px;
    @include font();
}

O código acima, quando convertido para CSS, será gerado com as propriedades definidas mais as propriedades do mixin.

.my-class {
    background-color: red;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

Agora, se quisermos valores diferentes do padrão, basta dar um include do mixin passando os argumentos.

.my-class {
    background-color: red;
    color: white;
    padding: 12px 16px;
    @include font(24, 400, 32);
}

O código acima convertido para CSS.

.my-class {
    background-color: red;
    color: white;
    padding: 12px 16px;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

Tanto no LESS quanto no Stylus também é possível utilizar mixins.

Imports

Outra técnica que é bastante comum quando se trabalha com pré-processadores de CSS é usar imports, algo que também é possível fazer com CSS puro, a diferença é que o import do CSS faz com que o navegador baixe outro(s) arquivo(s), já o do pré-processador vai juntar tudo em um único arquivo.

Normalmente dividimos o nosso código em diversos arquivos, ou dependendo de como for estruturar o seu projeto, em pastas também, vejamos um exemplo prático.

Suponhamos que temos o arquivo _variables.scss aonde iremos declarar todas as variáveis que serão utilizadas no projeto e o arquivo _mixins.scss aonde definimos os mixins.

Observação: O underline (_) no começo do nome dos arquivos indica, no SCSS, que eles não serão compilados para o CSS.

Agora basta criar um novo arquivo .scss sem underline no começo do nome, esse arquivo é que será compilado para o CSS e ele fará apenas o import dos outros arquivos, dessa forma.

@import 'variables';
@import 'mixins';

Note que, para importar um arquivo, usa-se o sinal de arroba (@) seguido da palavra import e o nome do arquivo. Não é necessário colocar o underline (_) e nem a extensão .scss. Também é possível importar todos os arquivos de uma vez, para isso, basta separar com vírgula @import 'variables', 'mixins';.

Tanto no LESS quanto no Stylus também é possível utilizar imports, aliás, o Stylus tem uma opção muito boa chamada File globbing para poder importar diversos arquivos de um diretório de uma vez, segue um exemplo da própria documentação.

Suponhamos que temos a pasta product e dentro dela temos os arquivos body.styl, foot.styl e head.styl. Com o Stylus, podemos importá-los todos de uma vez usando o sinal de asterisco (*), dessa forma @import 'product/*'.

Compilando

No final, tudo vira CSS, então você precisa de algum compilador que converta seu código para CSS. Existem diversos compiladores que não vamos entrar em detalhes aqui porque isso é tema para um novo artigo.

Conclusão

Tentamos mostrar com esse artigo algumas vantagens de se trabalhar com pré-processadores de CSS, nos exemplos de código focamos no SCSS que é o que nós utilizamos aqui no Elo7, mas se você trabalha com LESS ou Stylus, todos eles oferecem as mesmas vantagens destacadas aqui, só que de formas diferentes.

Ainda existem outras vantagens que os pré-processadores nos oferecem, como fazer condições com if e else, funções, laços de repetição entre outras que valem um novo artigo à parte.

E você, já trabalha com pré-processadores de CSS? Qual você utiliza? Conte a sua experiência para nós através dos comentários.

• front-end
• css
• sass