Diretivas de controle do Sass

Diretiva if

Se a expressão dessa diretiva não for avaliada como false ou null, ela é executada. Na expressão, podem ser colocadas expressões aritméticas comuns, variáveis e outras coisas. Geralmente, há estilo dentro das diretivas, mas isso não é obrigatório. Exemplo de uso da diretiva @if:

$x: 3;

p {
  @if $x == 3 {
    overflow: hidden;
  }
  @if $x != 3 {
    overflow: auto;
  }
}

p {
  overflow: hidden; }

Note que, diferentemente da maioria das linguagens de programação, a expressão da diretiva não é colocada entre parênteses.

Diretivas else if e else

A diretiva @else if pode ser colocada após um @if ou outro @else if. Assim como o @if, ela também tem uma expressão, mas, diferentemente dele, ela só é avaliada se as condições da diretiva anterior não forem atendidas. Já o @else não tem nenhuma expressão, e é executado apenas quando a diretiva anterior é avaliada e não tem as suas condições atendidas. Exemplo:

$x: 3;
$y: 10;

p {
  @if $x > 3 {
	overflow: hidden;
  }
  @else if $x == 3 and $y > 15 {
    line-height: 2em;
  }
  @else if $x == 3 or $y < 7 {
    vertical-align: middle;
  }
  @else {
    overflow: auto;
  }
}

p {
  vertical-align: middle; }

No exemplo acima, o Sass avalia primeiramente o @if, que não tem suas condições atendidas. O mesmo ocorre com o primeiro @else if. O segundo @else if tem as suas condições atendidas, então seu estilo é incluído. O @else não tem seu estilo incluído porque a diretiva anterior a ele, o segundo @else if, foi avaliada e teve as suas condições atendidas.

Repare que foi usado o operador lógico and no primeiro @else if e o operador or no segundo. Esses operadores servem para unir expressões lógicas. No caso do and, é necessário que os dois operandos sejam verdadeiros para que a expressão seja verdadeira. No caso do or, é necessário que apenas um dos operandos seja verdadeiro para que a expressão seja verdadeira.

Assim como ocorre com os outros operadores do Sass, as regras de precedência e associatividade determinam a ordem das operações. O operador lógico and tem precedência maior do que o or, e por isso é avaliado primeiro. Porém, você pode usar os parênteses para mudar essa ordem:

$x: 3;
$y: 10;

.warning {
  @if $y <= 10 or $x <= 3 and $y > 15 {
    line-height: 2em;
  }
}

.error {
  @if ($y <= 10 or $x <= 3) and $y > 15 {
    line-height: 2em;
  }
}

.warning {
  line-height: 2em; }

Diretiva for

Essa diretiva é um loop, porque ela se repete n vezes, e em cada iteração, ela faz o que está no corpo da diretiva (geralmente, ela inclui estilo). Sua sintaxe é a seguinte:

@for $variavel <start> to/through <end> {
  ...
}

Basicamente, essa estrutura faz com que a variável informada receba inicialmente o valor especificado em <start> e vá aumentando ou diminuindo seu valor em 1 até o valor final, caso seja usada a palavra through, ou até o valor imediatamente anterior ao final, se for usada a palavra to.

Se o valor inicial for menor do que o final, a variável aumentará seu valor a cada ciclo. Caso contrário, ela diminuirá seu valor. Exemplo:

@for $i from 1 through 12 {
  .col-md-#{$i} {
    width: percentage($i/12);
  }
}

.col-md-1 {
  width: 8.33333%; }

.col-md-2 {
  width: 16.66667%; }

.col-md-3 {
  width: 25%; }

.col-md-4 {
  width: 33.33333%; }

.col-md-5 {
  width: 41.66667%; }

.col-md-6 {
  width: 50%; }

.col-md-7 {
  width: 58.33333%; }

.col-md-8 {
  width: 66.66667%; }

.col-md-9 {
  width: 75%; }

.col-md-10 {
  width: 83.33333%; }

.col-md-11 {
  width: 91.66667%; }

.col-md-12 {
  width: 100%; }

É muito comum usar i como nome da variável usada no @for, porque ela é tradicionalmente usada nesse tipo de loop nas linguagens de programação.

Diretiva each

Funciona como um foreach de linguagens de programação. É usada para percorrer estruturas de dados. No caso do Sass, as estruturas podem ser listas ou mapas. Sintaxe para listas:

@each $variavel in lista {
  ...
}

Sintaxe para mapas:

@each $chave, $valor in mapa {
  ...
}

Exemplo mostrando a diretiva sendo usada para percorrer uma lista:

$countries: brazil, united-states, colombia, japan;

@each $country in $countries {
  ##{$country} {
    background-image: url('flags/#{$country}.png');
  }
}

#brazil {
  background-image: url("flags/brazil.png"); }

#united-states {
  background-image: url("flags/united-states.png"); }

#colombia {
  background-image: url("flags/colombia.png"); }

#japan {
  background-image: url("flags/japan.png"); }

Talvez você tenha ficado confuso pelo uso das duas hashtags. A primeira foi usada para indicar um seletor de ID e a segunda para usar a interpolação.

Agora vamos ver um exemplo onde um mapa é percorrido:

$countries: (brazil: 'brazil.jpg', united-states: 'united-states.jpg', colombia: 'colombia.png', japan: 'japan.jpg');

@each $country-id, $country-img in $countries {
  ##{$country-id} {
    background-image: url('flags/#{$country-img}');
  }
}

#brazil {
  background-image: url("flags/brazil.jpg"); }

#united-states {
  background-image: url("flags/united-states.jpg"); }

#colombia {
  background-image: url("flags/colombia.png"); }

#japan {
  background-image: url("flags/japan.jpg"); }

Diretiva while

Essa também é uma diretiva de repetição. Ela tem uma expressão, que é avaliada antes de cada ciclo. Enquanto essa expressão não for avaliada como false nem null, seu estilo continuará sendo incluído.

O exemplo abaixo diminui a tonalidade de vermelho da cor enquanto ela for maior que 20. Depois, ela é mostrada em hexadecimal. Perceba que a diretiva não contém nenhum estilo, mas não deixa de ser válida por causa disso. Veja o exemplo:

$header-color: rgb(200, 40, 90);

@while red($header-color) > 20 {
  $header-color: adjust-color($header-color, $red: -5);
}

header {
  color: $header-color;
}

header {
  color: #14285a; }