Ter a possibilidade de usar condicionais no CSS é uma daquelas coisas que fazem os pré-processadores de CSS tão sensuais.
No Sass essas condicionais são chamadas de **Diretivas de controle**, ou em inglês, que é mais chique, “Control Directives”. As funções são @if, @for, @each e @while. São as condicionais tradicionais que estamos acostumados a usar nas outras linguagens.
@if
Se algo for qualquer coisa diferente de falso, execute determinado comando.
Um uso bastante simples é da própria documentação do Sass:
Como era de se esperar, existe um @else para nos dar todo o apoio. Esse exemplo acima é bastante simples. Se você tem uma variável qualquer, no nosso caso monster, e essa variável pode mudar de valor em determinado lugar do código. Se mudar, há uma série de condições ali.
Um exemplo mais real:
Ali estamos medindo a quantidade de branco que há na variável $color1, que irá receber um código de cor. Se for menor que 30% de luz (claridade), background black no elemento, caso contrário, background white.
@for
Inicia uma variável e executa uma ação, incrementando essa variável um determinado número de vezes. Para cada repetição, um a variável de contador é usada para ajustar o código de saída.
Muito útil. Para você fazer códigos como o de baixo:
Você faria uma condição assim:
Outro truque interessante é que se você colocar o primeiro número maior que o segundo, assim: @for $i from 4 through 1, a função irá decrementar em vez de incrementar a variável. O resultado:
Simple like that.
@each
Define uma variável para item de uma lista de valores, produzindo blocos de código utilizando os valores da lista.
Neste artigo fala sobre Maps Structure do Sass, e dá uma boa noção do que o @each pode fazer. Mas um exemplo rápido. Para um código assim:
Você teria um Sass assim:
Você gerencia basicamente um bloco de CSS e as variáveis para adicionar ou remover cores.
@while
Repete um determinado bloco e código enquanto determinado estado for verdadeiro.
O exemplo mais bacana que pode ser mostrado aqui é a criação de um grid básico. Para ter um código como este abaixo:
O código seria algo mais ou menos assim:
Claro, para fazer um grid um pouco mais complexo, usando porcentagens, guardando o valor do gutter em uma variável, roas e etc você precisa de um pouco mais. Veja esse artigo aqui.
Conclusão
Eu não gosto de usar pré-processadores. Eu já falei disso aqui há muito tempo. Se você for fazer um site simples, sem muitas grandes ambições, nada muito complicado, talvez não seja necessário usar um Sass da vida. Contudo, em várias ocasiões, ter essas e outras funções que citamos aqui, o ganho na produtividade é enorme. Aí sim esses penduricalhos começam a valer a pena. 😉