Siguiendo la línea del artículo anterior, vamos a ver algunas directivas de Sass más, algunas las repasamos antes, pero también muy importantes ya que nos darán muchas variantes para mejorar tanto nuestro código Sass como su organización.
IF
La directiva de control IF procesa su contenido si la expresión dentro de él evalúa distinto de false. Por ejemplo:
$expresion = true;
@mixin example {
if $expresion
display: block;
@else
display: none;
}.some-selector {
@include example;
}
Este condicional es mejor utilizarlo junto a otros. Por ejemplo si recorremos una lista con un each, podemos usar esta directiva para comprobar si el valor actual de la lista cumple con alguna expresión.
FOR
Esta directiva funciona de dos maneras diferentes:
La primera de ellas es como el siguiente ejemplo:
@for $i from 1 through 5
.some-selector-·{$i} {
width: 50%;
}//Código CSS
.some-selector-·1 {
width: 50%;
}
.some-selector-·2 {
width: 50%;
}
.some-selector-·3 {
width: 50%;
}
.some-selector-·4 {
width: 50%;
}
.some-selector-·5 {
width: 50%;
}
Simplemente el loop se ejecuta desde el valor 1 hasta llegar al 5, incrementando su valor en 1 en cada iteración.
La segunda de ellas es como el siguiente código:
@for $i from 1 to 5
.some-selector-·{$i} {
width: 50%;
}//Código CSS
.some-selector-·1 {
width: 50%;
}
.some-selector-·2 {
width: 50%;
}
.some-selector-·3 {
width: 50%;
}
.some-selector-·4 {
width: 50%;
}
La diferencia entre usar to y through es que el primero no incluye el valor 5 (en este ejemplo).
EACH
En el último artículo sobre listas de sass vimos una pequeña introducción a esta directiva de control. Básicamente each recorre una lista y toma cada valor de ella para poder utilizarla como queramos en nuestro código:
@mixin example {
$list: mario alejandro araque
@each $var in $list
.name-#{$var} {
display: block;
}
}.some-selector {
@include example;
}
WHILE
Esta directiva nos permite evaluar el código dentro del while hasta que su condición se evalúe como false. Al igual que la directiva for, podemos crear iteraciones muy complejas.
$count = 4;
@while $count > 0
.selector-#{$count} {
display: block;
}
$count: $count - 1;Estos son nada más que unos ejemplos, pero queda bastante claro que se pueden hacer cosas muy complejas con estas 4 directivas de control.