Sass: Usando directivas

En la medida que vamos usando cada vez mas Sass nos damos cuenta de que nos seria de gran utilidad poder decidir que en función de un determinado valor agregar un atributo o generar para cada uno de los elementos de una lista un determinado estilo. Sass a lo largo de sus distintas versiones ha ido agregando lo que llaman directivas (funcion / if / while / for / each).

Introduccion

Sass nos brinda grandes ventajas con el uso de variables y mixins ahora bien seria de gran utilidad encapsular parte de la lógica dentro de funciones las cuales soportan el pasaje de argumentos como asi tambien agregarle estructuras de control como ser el caso de los bloques if, each, for y while.

Funciones

Sass nos permite crear nuestras propias funciones y usarlas pasandole como argumento cualquier tipo de dato como así también usarla en cualquier lugar del archivo siempre que sea en un lugar posterior a la declaración de la misma.  Veamos ahora la estructura que deberá tener cualquier función dentro de Sass:

Como se ve en el bloque de código anterior tanto la palabra function como la palabra return deben ser precedidas de un arroba (@) para poder indicar que hacen referencia a una palabra reservada de Sass.

Veamos ahora un ejemplo donde se declara la función, es invocada y cual es código que nos genera.

SASS CSS

@function fluidize( $target, $context ) {

@return ($target / $context) * 100%;

}

.sidebar {

width: fluidize( 350px, 1000px);

}

.sidebar {

width: 35%;

}

Como se ve en el ejemplo la utilizacion  de funciones sencilla y corren las mismas reglas que para los mixins ya que para cada uno de los argumentos se les puede colocar valores por default en caso de que nos olvidemos de informar alguno. Para mas información acerca de los mixins pueden leer el post “Bloques reutilizables de código con Mixins”.

Directivas de control

En este apartado veremos cada una de las estructuras por medio de ejemplos con el fin de facilitar el entendimiento de la sintaxis de las mismas. Al igual que las funciones las directivas de control van precedidas del arroba (@) para indicar que se hace referencia a una palabra reservada.

IF

La directiva de control if (@if condicion) toma una expresión de Sass validandola y en caso de que retorne true hará cualquier cosa que se indique en su interior. La misma puede contener tantas condiciones como sean necesarias si la condición del if no se cumple, esto ultimo se puede hacer por medio del uso de @else if condicion.

Veamos ahora alguno de los tipos de comparaciones posibles:

  • == igual a
  • != distinto a
  • > mayor a
  • >= mayor o igual a (solo valido para números)
  • < menor a
  • <= menos o igual a (solo valido para números)

Veamos un ejemplo de esta estructura:

SASS CSS

$theme: pink;

header {

@if $theme == dark {

background: #000;

} @else if $theme == pink {

background: pink;

} @else {

background: #fff;

}

}

header {

background: pink;

}

EACH

La directiva each nos permite iterar sobre una lista/mapas de items de forma practica y sin tener que colocar alguna condición como en el caso del for. La forma de utilizarla es @each $var in lista donde $var puede tener cualquier nombre siempre que ya no estén siendo usado; la idea básica de esta estructura es que cada posición de la lista se ira colocando en una variable temporal ($var), por así decirlo, y que nos servirá para poder acceder al contenido de la misma de manera mas rápida y fácil.

Veamos un ejemplo de esta estructura:

SASS CSS

$animals puma sea-slug egret salamander;

@each $animal in $animals {

.#{$animal}-icon {

background-image: url(‘/images/#{$animal}.png’);

}

}

.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’);

}

FOR

La directiva for se diferencia de la each debido a que en la each no hace falta indicarle de que posición debe empezar a recorrer y cual es la posición final. La forma de declarar este tipo de directiva es @for $variable from indiceInicial through indiceFinal donde el indice inicial y final deben ser números enteros.

Veamos un ejemplo de esta estructura:

SASS CSS

@for $i from 1 through 3 {

.item-#{$i} {

top: $i * 30px;

}

}

.item-1 {

top: 30px;

}

.item-2 {

top: 60px;

}

.item-3 {

top: 90px;

}

WHILE

La directiva while se ejecutara en tanto y en cuanto una condición sea verdadera y delegando la responsabilidad de actualizar esa condición dentro del bloque while para la siguiente iteracion. La forma de declarar este tipo de directiva es @while $variable condicion donde la condición puede ser expresada con alguno de los comparadores explicados en el punto de la directiva If.

Veamos un ejemplo de esta estructura:

SASS CSS

$i: 1;

@while $i < 4 {

.item-#{$i} {

top: $i * 30px;

}

$i: $i + 1;

}

.item-1 {

top: 30px;

}

.item-2 {

top: 60px;

}

.item-3 {

top: 90px;

}

Conclusión

Las directivas son de gran ayuda a la hora de tener que trabajar con estilos como se podido ver en este post, si bien no es algo que se use cotidianamente en el mundo de los estilos por lo cual para personas que no tienen conocimientos de programación les puede resultar un tanto difícil al desconocer el funcionamiento de cada una de las estructuras. Esto ultimo no logra ser una limitante ya que las estructuras tienen una sintaxis simple y una vez que se ven los beneficios de lo que se puede lograr se trata de sacarle el mayor provecho posible.

You may also like...

1 Response

  1. Excelente aporte. Muchas gracias por la informacion!.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *