16 dicas de Sass para facilitar sua vida (parte 2)

Continuando as dicas Sass, conheça mais 8 dicas do pré-processador CSS que poderão facilitar muito sua vida no front end.

Ir para o artigo

Na primeira parte parte da minissérie com dicas de Sass, mostramos as 8 primeiras dicas que talvez você não conhecia para levar seu código Sass ao próximo nível.

Agora, na segunda e última parte, aprenda mais 8 dicas de Sass que, com certeza, vão ajudar bastante e facilitar sua vida no front end.

9. Argumentos variáveis para funções/mixins

Argumentos variáveis funcionam da mesma maneira que em outras linguagens que suportam o recurso: quaisquer argumentos extras para uma chamada de função/mixin são agrupados em uma lista e atribuídos ao argumento com um sufixo .

Sass

CSS compilado

O helper acima pode ser usado para configurar cores para ícones, por exemplo, sem ter que se repetir.

Ele funciona passando um número variável de argumentos (após o primeiro, required); espera-se que cada um desses argumentos seja um array de dois itens (na notação JavaScript, por exemplo, seria ['save', 'green']).

Na verdade, a sintaxe também funciona durante o tempo de chamada (call-time), em que expande uma lista em argumentos separados a serem usados no mixin de destino:

Talvez não haja tantos casos de uso para isso, mas a documentação tem um bom caso de uso para passar os argumentos atuais para outro mixin.

10. Argumentos de bloco de conteúdo para mixins

Desde a versão 3.2.0, o SCSS tem um argumento implícito de mixin acessível por meio da diretiva @content.

Ele permite passar um bloco de conteúdo SCSS inteiro como um argumento para o mixin:

Sass

CSS compilado

Este é um recurso muito poderoso, especialmente para o uso em frameworks, já que permite passar blocos arbitrários de estilo, envoltos (wrapped) em seletores específicos, podendo ser usados em loops, tornando condicional com @if etc.

Também é possível misturar argumentos padrão e de bloco de conteúdo também:

11. Padrão de bloqueio de substituição de conteúdo

Considere um mixin que gere um seletor e alguns estilos para ele, permitindo que o chamador (caller) personalize o estilo, se necessário:

Chamar este mixin usando argumentos de palavra-chave (veja a parte 1) é bastante conveniente, porque se os default forem bons, nenhum argumento extra precisa ser fornecido e, se não forem, só é preciso especificar os argumentos que deseja substituir:

Mas isso requer listar todas as propriedades substituíveis na assinatura do mixin. No entanto, os argumentos do bloco de conteúdo permitem substituições arbitrárias sem a “selva” de argumentos:

Sass

CSS compilado

A boa e velha Cascata de CSS substitui a propriedade (a última margem substitui a anterior).

Além disso, não existe a limitação de substituir as propriedades que o autor do mixin pensou; na verdade, isso também permite passar blocos aninhados:

Sass

CSS compilado

Esse pattern pode ser útil em qualquer código que produza um estilo não trivial com seletores gerados, uma vez que permite ao usuário um ponto de personalização além do que o autor da biblioteca previu.

Note, entretanto, que em casos simples (onde nenhum seletor é emitido dentro do mixin), é bastante desnecessário, já que qualquer substituição pode ser feita apenas usando a cascata CSS padrão.

12. Media query bubbling

Os blocos @media não precisam ser declarados no nível raiz da folha de estilo:

Sass

CSS

Observe como o compilador “borbulha” (“bubbles up“) o bloco @media para o nível raiz (já que o CSS regular não suporta o aninhamento do seletores) e, dentro dele, produz todos os estilos encontrados no bloco @media no código-fonte SCSS.

Isso é muito útil, pois permite fazer ajustes específicos de mídia em quase qualquer lugar em seu estilo, exatamente onde eles são relevantes, em vez de coletar todos os ajustes no final da folha de estilo e esperar que seus seletores permaneçam em sincronia com aqueles que eles estão substituindo (eles não irão).

13. Aninhamento de media query

O mecanismo de bubbling mencionado acima também leva em consideração o aninhamento e combina todas as queries aplicáveis com o operador and:

Sass

CSS

14. Estendendo seletores

Sass permite estender seletores, copiando e combinando seletores no CSS compilado.

Curiosamente, embora o mecanismo seja (obviamente) muito diferente, a semântica de @extend é bastante análoga às linguagens de programação orientadas a objetos tradicionais (como Java e outras):

Sass

CSS compilado

Ou seja, .cat tem todas as propriedades de sua “classe pai” .animal, mais quaisquer propriedades específicas que ele adiciona ou substitui.

Enquanto no CSS normal é preciso fazer referência à classe extensível e à classe pai (por exemplo, <div class="animal cat">), agora simplesmente se nomeia a classe exata que se deseja (<div class="cat">).

O que ele herda (ou não) depende da definição de .cat e pode ser alterado posteriormente, sem tocar na marcação.

A substituição de propriedades na “classe filha” funciona devido ao estilo em cascata no navegador: o estilo para o mesmo seletor que vem depois no arquivo sempre vence o estilo que veio antes dele.

Talvez um pouco não intuitivamente, isso realmente funciona bem, mesmo se os seletores combinados tiverem especificidades diferentes (pense em .class estendendo um #id). Estender seletores pode ser preferível a usar mixins para obter o mesmo efeito:

Sass

CSS compilado

Observe como apenas a última propriedade (color) é diferente, o resto é o mesmo. Conforme se define mais tipos de animais, a quantidade de propriedades de estilo repetidas na saída CSS continua crescendo.

Isso contrasta com a forma como a extensão do seletor resolveria o mesmo problema:

Sass

CSS compilado

Lembrando que a extensão de seletor permite integrações em bibliotecas CSS de terceiros (que não precisam ser especificamente projetadas para extensão) ou mesmo escritas em SCSS.

Por exemplo:

15. Placeholder selectors

Como nos exemplos acima, a classe-base .animal não é usada em nenhum lugar diretamente (apenas por meio de suas classes filhas), é possível economizar código na copilação CSS através de um recurso chamado placeholder selectors.

Veja neste exemplo:

Sass

CSS compilado

Como %animal é um placeholder selector, ele não aparece na saída da compilação.

16. Herança múltipla

Um seletor pode herdar de vários outros seletores — ou seja, o SCSS oferece suporte a herança múltipla. Para cada @extend, o seletor atual é anexado ao seletor que está sendo estendido.

Quando combinado com placeholder selectors, isso permite abstrações poderosas. Isso talvez seja mais bem entendido por meio de um exemplo:

Framework (fictício)

Projeto usando o framework

Esta abordagem de se trabalhar com estilos traz alguns benefícios notáveis — autodocumentação; isolamento de nomenclatura; redução de repetição –, mas, claro, também com seu lado negativo — depurabilidade diminuída; falta de parâmetros.

Conclusão

Nesta minissérie com dicas de Sass para facilitar sua vida, mostramos recursos que estão presentes já há tempos no pré-processador queridinho dos devs front end, mas que, não necessariamente, são conhecidas e/ou consideradas pela maioria.

Contando com a primeira parte, essas foram as 16 dicas de Sass:

  1. Prefixando a referência ao ascendente
  2. Expansão de variáveis em seletores
  3. Variáveis default
  4. Diretivas de controle
  5. O tipo de data “list”
  6. Funções customizadas
  7. Valores padrão de argumentos
  8. Argumentos com palavras-chave (keywords)
  9. Argumentos variáveis para funções/mixins
  10. Argumentos de bloco de conteúdo para mixins
  11. Padrão de bloqueio de substituição de conteúdo
  12. Media query bubbling
  13. Aninhamento de media query
  14. Estendendo seletores
  15. Placeholder selectors
  16. Herança múltipla

Como em todas as listas com dicas, conheça cada uma delas e pondere sobre quais usar e quais não usar em cada projeto concreto que apareça — algumas, claro, podem ser usadas (de repente, com adaptações) para compor frameworks ou bibliotecas.

E você, conhece mais alguma dica de Sass e quer contar pra gente? Coloca nos comentários!