Directivas de control en Sass

Como vimos en el Tutorial de Sass, Sass es un preprocesador muy potente que mejora nuestra productividad y nos ayuda a controlar de forma más organizada los estilos de un proyecto, Sass incluye unas extensiones llamadas SassScript, gracias a las cuales podemos utilizar variables en las propiedades, las directivas de control no se usan habitualmente en proyectos de mediana o gran envergadura, para verlos en funcionamiento tendríamos que ver librerías mucho más avanzadas, aunque pueden sernos muy útiles para el desarrollo de plantillas predefinidas o para crear nuestras propias librerías.

@if

Del mismo modo que usamos la función “if()” en entornos de programación como Javascript o PHP, gracias a SassScript podemos utilizar este tipo de característica en nuestras hojas de estilo.

En entornos de programación como PHP tenemos recursos para evaluar expresiones, pues Sass también nos ofrece una serie de recursos similares con las directivas:
@if

@else if

@else

Veamos un ejemplo:

$colornav: negro;
p {
@if $colornav == blanco {
color: #FFFFFF;
} @else if $colornav == azul {
color: #184583;
} @else {
color: #000000;
}
}

El resultado al procesar el código sería el siguiente:

p {
color: #000000;
}

@for

La directiva @for es algo similar a los bucles for que utilizamos en programación, primero creamos una variable y para recorrerla utilizamos “from” y “through” o “to”, entre estas dos últimas sintaxis existe una diferencia importante, si utilizamos la sintaxis “to”, se recorre la variable desde el valor de “from” hasta el último valor anterior del recorrido, es decir, no se recorre el último valor, veamos un ejemplo:

@for $z from 1 to 4 {
.parrafo-#{$z} { margin: 2em; }
}

El resultado al procesar el código sería el siguiente:

.parrafo-1 {
margin: 2em; 
}
.parrafo-2 {
margin: 2em; 
}
.parrafo-3 {
margin: 2em; 
}

Lo que ha pasado aquí es que solo se han creado tres reglas porque “to”
no recorre el último valor, para que se hubieran creado 4 reglas, tendremos que utilizar “through”.

Si nos fijamos en el código que hemos creado no tiene mucha utilidad, podemos hacer lo mismo con una sola regla “.parrafo” para
todo, vamos a crear algo más avanzado:

@for $i from 1 through 3 {
.parrafo-#{$i} { 
margin: 2em * $i; 
padding: 3em * $i; 
}
}

El resultado sería el siguiente:

.parrafo-1 {
margin: 2em;
padding: 3em; 
}
.parrafo-2 {
margin: 4em;
padding: 6em; 
}
.parrafo-3 {
margin: 6em;
padding: 9em; 
}

Esto ya tiene más utilidad, podemos usar operadores matemáticos y utilizar el valor para crear clases distintas con nombres similares,
esto nos proporciona un mayor control sobre el código.

@each

Esta es una de las directivas que más me gusta y a la que encuentro más utilidad, esta directiva nos permite recorrer una lista de
valores, veamos un ejemplo:

@each $seccion in green, black, red, yellow {
.#{$seccion}-icon {
color: #{$seccion};
}
}

El resultado sería el siguiente:

.green-icon {
color: green; 
}
.black-icon {
color: black; 
}
.red-icon {
color: red; 
}
.yellow-icon {
color: yellow; 
}

Otro ejemplo más avanzado podría ser el siguiente:

@each $seccion in css, php, javascript, jquery {
.#{$seccion} {
background-image: url('/images/#{$seccion}.jpg');
content: 'Tutoriales de #{$seccion}';
}
}

Resultado:

.css {
background-image: url("/images/css.jpg");
content: "Tutoriales de css"; 
}
.php {
background-image: url("/images/php.jpg");
content: "Tutoriales de php"; 
}
.javascript {
background-image: url("/images/javascript.jpg");
content: "Tutoriales de javascript"; 
}
.jquery {
background-image: url("/images/jquery.jpg");
content: "Tutoriales de jquery"; 
}

Lo mejor de esta directiva es que podemos utilizar múltiples variables y asignarles una lista de valores, veamos otro ejemplo
con la directiva @each en el que incluiremos un operador matemático.

@each $color, $posicion, $seccion in (#888888, block, css),
                      	 (#555555, block, javascript),
                      	 (#222222, block, php) {
.#{$seccion}-icon {
background-image: url('/images/#{$seccion}.png');
background-color: $color - #111111;
border: 2px solid $color;
display: $posicion;
}
}

El resultado sería el siguiente:

.css-icon {
background-image: url("/images/css.png");
background-color: #777777;
border: 2px solid #888888;
display: block; 
}
.javascript-icon {
background-image: url("/images/javascript.png");
background-color: #444444;
border: 2px solid #555555;
display: block; 
}
.php-icon {
background-image: url("/images/php.png");
background-color: #111111;
border: 2px solid #222222;
display: block; 
}

Y tambien podemos asignar a las variables parejas de “clave:valor”:

@each $elemento, $ancho in (navbar: 100%, section: 70%, aside: 30%, footer: 100%) {
.#{$elemento} {
width: $ancho;
}
}

Resultado:

.navbar {
width: 100%; 
}
.section {
width: 70%; 
}
.aside {
width: 30%; 
}
.footer {
width: 100%; 
}

@while

La directiva @while tambien es similar a los bucles while que utilizamos en programación, en primer lugar creamos una variable
y le asignamos un valor, a continuación le indicamos la condición, escribimos la expresión que deseamos ejecutar y por último le
asignamos el valor con el que se recorrerá la variable utilizando un operador matemático:

$margen: 1;
@while $margen < 11 {
.elemento-#{$margen} { margin: $margen+em; }
$margen: $margen + 1;
}

Resultado:

.elemento-1 {margin: 1em;}
.elemento-2 {margin: 2em;}
.elemento-3 {margin: 3em;}
.elemento-4 {margin: 4em;}
.elemento-5 {margin: 5em;}
.elemento-6 {margin: 6em;}
.elemento-7 {margin: 7em;}
.elemento-8 {margin: 8em;}
.elemento-9 {margin: 9em;}
.elemento-10 {margin: 10em;}

Como hemos visto, es lo más parecido a un bucle while, cuando la variable es menor que el valor asignado, devuelve “false” y no se ejecuta
la expresión.

Con todas estas directivas podemos llevar la maquetación a un nivel superior, acercándola un poco más a la programación, como mencioné
al principio del artículo, estas características son más avanzadas y no suelen verse mucho, pero pueden ser muy útiles para crear
nuestras propias librerías o crear frameworks con un mayor control y productividad.