ESCREVENDO ESTRUTURAS DE DECISÃO COM @IF E @ELSE E @ELSE IF

@mixin coresBotao ($corFundo){ $corFonte: #FFFFFF; @if(lightness($corFundo) > 50%){ $corFonte: #000000; } background-color: $corFundo; color: $corFonte; } button{ ... &.alerta{ @include coresBotao(#288014); } &.erro{ @include coresBotao(#C41717); } &.warning{ @include coresBotao(#FFFF03); } }

No mixin coresBotao , presente no código mostrado

anteriormente, temos uma diretiva @if que verifica a quantidade

de luminosidade que possui a cor de fundo do botão. Vale ressaltar que a expressão usada em conjunto com a diretiva @if deve

retornar um valor booleano, ou seja, verdadeiro ou falso.

Isso significa que, se a luminosidade da cor de fundo for maior que 50%, a cor da fonte será trocada para preto. Caso contrário, o bloco de comando presente dentro da diretiva @if é ignorado e a

cor da fonte permanece inalterada.

Uma breve análise do código compilado, exibido a seguir, confirma como funciona a compilação da diretiva @if . button.alerta { background-color: #288014; color: #FFFFFF; } button.erro { background-color: #C41717; color: #FFFFFF; } 146 9.1 ESCREVENDO ESTRUTURAS DE DECISÃO COM @IF E @ELSE E @ELSE IF

button.warning {

background-color: #FFFF03; color: #000000; }

A figura a seguir exibe a renderização dos botões com o uso da diretiva @if para determinar a cor de fonte deles. Vale ressaltar

que essa técnica fica muito mais interessante quando temos um conjunto maior de botões, ou um outro componente qualquer para efetuar o tratamento.

Figura 9.2: https://goo.gl/eXr8KT

Vale lembrar que, no Sass, uma estrutura de condição sempre começa com a palavra-chave @if , seguida por uma expressão. Essa

expressão pode ser uma variável, uma chamada de função ou uma equação, desde que o seu valor seja um booleano. O código executado no caso de a expressão ter valor verdadeiro deve estar entre chaves {} .

A diretiva @if funciona muito bem em conjunto com as

funções de cores, operadores lógicos, relacionais e expressões aritméticas. Em outras palavras, você pode fazer uso dessa diretiva para calcular tamanho e peso de fontes, espaçamentos, estilos para as bordas, sombras, enfim, o que sua imaginação permitir.

Em conjunto com a diretiva @if , opcionalmente, você pode

incluir a diretiva @else imediatamente após. O bloco de estilo que

compõe a diretiva @else é compilado apenas se a expressão da

diretiva @if for falsa.

Isso significa que, quando as diretivas @if e @else são usadas

em conjunto, podemos expressar duas alternativas para a compilação. Uma delas executa caso a condição seja verdadeira, e a outra quando a condição não for satisfeita. A imagem adiante ilustra

9.1 ESCREVENDO ESTRUTURAS DE DECISÃO COM @IF E @ELSE E @ELSE IF

como funciona o processo em uma estrutura condicional.

Figura 9.3: https://goo.gl/wWaU95

O Sass também possui a diretiva @else if que, como o nome

sugere, é uma combinação das duas instruções. Essa diretiva deve ser usada em conjunto com a diretiva @if e será executada apenas

se a expressão do @if não for satisfeita.

Entretanto, diferentemente do @else , o @else if possui

uma expressão. Em outras palavras, se a expressão do @if for falsa,

a expressão do @else if será experimentada. Caso ela seja

verdadeira, o bloco de estilo aninhado à diretiva é compilado. Caso a expressão seja falsa, o compilador do Sass procura pelo próximo @else if . Acompanhe a seguir a sintaxe de um bloco de decisão no Sass. @if(expressao booleana){ bloco de estilo }@else if(expressao booleana){ bloco de estilo }@else if(expressao booleana){ bloco de estilo ... }@else if(expressao booleana){ bloco de estilo }@else{ 148 9.1 ESCREVENDO ESTRUTURAS DE DECISÃO COM @IF E @ELSE E @ELSE IF

bloco de estilo }

Vale ressaltar que é possível usar diversos @else if para o

mesmo @if e apenas um @else . Ou seja, o seu bloco de decisão

deve iniciar sempre com a diretiva @if . Após a diretiva @if , você

pode usar a diretiva @else if ou @else . Essas duas últimas são

opcionais. Isso significa que você pode ter um bloco de decisão com apenas @if , com @if e @else if , com @if e @else , e ainda

a mistura das três: @if , @else if e @else .

É importante enfatizar que o uso da diretiva @else if

aumenta o número de alternativas para a compilação. Em outras palavras, a expressão de uma diretiva @else if é avaliada apenas

se as diretivas @if ou @else if anteriores a ela forem falsas.

O @else deve ser sempre o último bloco. Ele terá seu bloco de estilo compilado se todas as outras diretivas da estrutura de decisão tiverem suas expressões com valor falso. Normalmente, as estruturas de decisão são usadas em conjunto com mixins e functions, visando aumentar o poder de reutilização deles, visto que o comportamento pode ser alterado de acordo com o valor dos parâmetros recebidos nas functions e mixins. Para ilustrar a utilização de uma estrutura de decisão um pouco mais complexa, vamos construir um mixin para desenhar uma setinha na página. Uma seta normalmente serve para indicar alguma informação adicional, ou um caminho a seguir, e tem uma direção. A ideia é construir um mixin que desenhe uma seta usando direção, tamanho e cor variáveis.

Acompanhe a seguir a construção do mixin. Veja que inicialmente foram setados os valores que são iguais para as setas de qualquer direção, como o tamanho da borda, a cor da borda, entre outros. Em seguida, foi adicionado um bloco de decisão.

9.1 ESCREVENDO ESTRUTURAS DE DECISÃO COM @IF E @ELSE E @ELSE IF

A diretiva @if possui os comandos para a criação de uma seta

que aponte para a direita. Isso indica que, se no include do mixin o valor da variável $direcao for direita, o bloco de código aninhado

a essa diretiva será adicionado ao CSS, e os demais blocos @else if e @else devem ser ignorados.

O mesmo ocorre para os @else if para a direção esquerda e

topo. No final, um bloco @else deve desenhar uma seta para baixo

nos casos em que qualquer coisa diferente de esquerda, direita ou topo for adicionada como direção.

@mixin setinha($tamanho, $direcao, $cor){ border-width: $tamanho; border-color: transparent; border-style: solid; display: inline-block; height: 0; width: 0; @if($direcao == "direita"){ border-left-color: $cor; border-right-width: 0;

}@else if($direcao == "esquerda"){ border-right-color: $cor; border-left-width: 0; }@else if($direcao == "topo"){

border-bottom-color: $cor; border-top-width: 0;