O nome deste artigo também poderia ter sido “16 coisas muito legais que você pode fazer com Sass que você provavelmente não sabia e que vão mudar para sempre sua maneira de escrever folhas de estilo”, mas como ficaria um pouco longo demais, escolhemos deixar esse mesmo.

Fato é que as 16 dicas de Sass apresentadas aqui realmente são muito interessantes, algumas delas realmente podendo alterar completamente a maneira como você escreve suas folhas de estilo com esse incrível pré-processador CSS.

1. Prefixando a referência ao ascendente

Essa é a maneira como geralmente se usa a referência ao elemento ascendente, com o caractere &:

Mas o & também pode ser usado com um prefixo, dessa maneira:

Isso pode ser muito útil quando se tem um aninhamento profundo regras e é preciso efetuar uma alteração no estilo de um elemento com base em uma correspondência de seqüência muito mais próxima da raiz do DOM.

Assim, não é preciso sair do aninhamento apenas para, seguindo o exemplo, poder alterar o estilo de <p> baseado em uma classe no <body>.

2. Expansão de variáveis em seletores

Variáveis podem ser expandidas em seletores usando interpolação em Sass da seguinte forma:

E também é possível usar a interpolação em qualquer outro lugar, como media queries e até comentários:

3. Variáveis default

Se um módulo SCSS pode ser configurado usando globais (que tende a ser o modo SCSS de se trabalhar), então é possível declará-los com um valor padrão:

Então é possível, opcionalmente, sobrescrever o(s) padrão(ões) antes de sua inclusão:

Ou seja, uma atribuição com um !default só terá efeito se essa variável não tiver um valor definido antes (em contraste com a atribuição padrão, que sempre substituirá um possível valor anterior).

É assim que diversos frameworks e bibliotecas que usam Sass são configurados. Se você já teve a curiosidade de olhar o código de um Foundation ou de um Compass, já deve ter encontrado muito disso por lá.

4. Diretivas de controle

Sass oferece suporte para diretivas de controle de fluxo padrão em linguagens de programação, como if:

Há também @for, @each e @while, que são bons para serem usados em uma infinidade de casos que, de outra forma, precisariam de muita repetição para escrever os códigos.

Por exemplo:

5. O tipo de data “list”

Como foi visto no exemplo anterior, @each pode iterar sobre uma lista. Listas são, de fato, uma parte fundamental da linguagem Sass.

Uma demonstração rápida da utilidade do tipo list pode ser a configuração de algum estilo gerado:

Isso demonstra 2 features do tipo de dados list: nomeadamente a função de acesso a listas nth() e, mais interessante, a notação de aninhamento de listas.

Para efeitos de comperação, a notação JavaScript para o exemplo acima seria equivalente a:

6. Funções customizadas

Mixins são uma parte bem conhecida de Sass, mas a linguagem também permite definir funções personalizadas.

Ao contrário do que a maioria imagina, isso pode ser feito em Sass puro, sem precisar de nenhum tipo de extensão em Ruby:

A diferença principal entre mixins e funções é bastante clara: mixins são usados para “includes” (principalmente evitar repetições de código) e funções para retornar valores depois de algum processamento.

Sass já possui diversas funções embutidas (e Compass também), então certifique-se de conhecê-las antes de tentar escrever suas próprias.

7. Valores padrão de argumentos

Mixins e funções suportam valores padrão para argumentos; os últimos argumentoss zero-para-N podem ser opcionais, fornecendo-lhes um valor padrão:

8. Argumentos com palavras-chave (keywords)

Se um mixin (ou função) requer muitos argumentos, há uma sintaxe em tempo de chamada similar para selecionar argumentos específicos para substituir:

Sem ser capaz de nomear argumentos em tempo de chamada, seria preciso especificar $topPadding e $rightPadding primeiro, mas, com este recurso, é possível substituir apenas o argumento desejado, deixando os demais com seus seus valores padrão.

Fim da primeira parte das 16 dicas de Sass

Estas foram as primeiras dicas de Sass abordadas:

  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)

Na verdade, não são dicas muito avançadas; constituem, inclusive, o que poderia ser chamar de conhecimento básico-intermediário da linguagem. Entretanto, muitos que começam a usar Sass e se maravilham com seus recursos podem acabar negligenciando estas dicas que, certamente, são grande parte do poder que a linguagem oferece.

Na parte 2 (e final) do artigo, confira o restante das dicas de Sass que, certamente, vão ajudar bastante quando você for escrever seus estilos.