SassScript define algunas directivas de control básicas y expresiones para incluir estilos solamente si se cumplen determinadas condiciones o para incluir el mismo estilo varias veces con ligeras variaciones.
Nota Las directivas de control son una característica muy avanzada que rara vez se utiliza directamente en las hojas de estilos. Sin embargo, son muy útiles para definir mixins y otras características avanzadas de librerías como Compass.
8.1. La función if()
La functión if() permite tomar decisiones para que una hoja de estilos incluya unos u otros estilos en función de unas determinadas condiciones. La función if() solamente evalúa el argumento que corresponde al valor que va a devolver, por lo que en el otro valor puedes hacer referencia a variables que no existen o realizar cálculos que en circunstancias normales causarían algún error (como por ejemplo dividir por cero).
8.2. La directiva @if
La directiva @if evalúa una expresión SassScript y solamente incluye los estilos definidos en su interior si la expresión devuelve un valor distinto a false o null. Ejemplo:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}El código Sass anterior se compila de la siguiente manera:
p {
border: 1px solid;
}La directiva @if puede ir seguida de una o más directivas @else if y una directiva @else. Si la expresión evaluada por @if es false o null, Sass evalúa por orden el resto de directivas @else if hasta que alguna no devuelva false o null. Si ninguna directiva @else if llega a ejecutarse, se ejecuta la directiva @else si existe. Ejemplo:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}El código Sass anterior se compila de la siguiente manera:
p {
color: green;
}8.3. La directiva @for
La directiva @for muestra repetidamente un conjunto de estilos. En cada repetición se utiliza el valor de una variable de tipo contador para ajustar el resultado mostrado. La directiva puede utilizar dos sintaxis: @for $var from <inicio> through <final> and @for $var from <inicio> to <final>.
La diferencia entre las dos sintaxis es el uso de las palabras clave through o to. El valor $var puede ser cualquier variable, mientras que <inicio> y <final> son expresiones SassScript que deben devolver números enteros.
Cuando el valor de <inicio> es mayor que el de <final> el valor del contador se decrementa en vez de incrementarse.
En cada repetición del bucle, la directiva @for asigna a la variable $var el valor del contador y repite los estilos utilizando el nuevo valor de $var. En la sintaxis from ... through, los estilos se repiten desde <inicio> hasta <final>, ambos inclusive. Por su parte, en la sintaxis from ... to los estilos se repiten desde <inicio> hasta <final>, sin incluir este último. Ejemplo:
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}El código Sass anterior se compila de la siguiente manera:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}8.4. La directiva @each
La sintaxis habitual de la directiva @each es la siguiente @each $var in <lista o mapa>. El valor $var puede ser cualquier variable y <lista o mapa> es una expresión *SassScript** que devuelve una lista o un mapa.
El funcionamiento de @each es el siguiente: se recorre toda la lista o mapa y en cada iteración, se asigna un valor diferente a la variable $var antes de compilar los estilos. Ejemplo:
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}El código Sass anterior se compila de la siguiente manera:
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}8.4.1. Asignación múltiple
La directiva @each también puede utilizar varias variables de forma simultánea, como por ejemplo: @each $var1, $var2, ... in <lista>. Si <lista> es una lista formada por listas, a cada variable se le asigna un elemento de cada sublista. Ejemplo:
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}El código Sass anterior se compila de la siguiente manera:
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}Como los mapas se consideran listas formadas por pares clave: valor, también en este caso se puede utilizar la asignación múltiple. Ejemplo:
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}El código Sass anterior se compila de la siguiente manera:
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}8.5. La directiva @while
La directiva @while toma una expresión SassScript y repite indefinidamente los estilos hasta que la expresión da como resultado false. Aunque esta directiva se usa muy poco, se puede utilizar para crear bucles más avanzados que los que se crean con la directiva @for. Ejempl:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}El código Sass anterior se compila de la siguiente manera:
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}