Estructuras de control en CSS mediante Sass

Sass nos permite emplear estructuras de control en CSS  gracias a las directivas de que proporciona pudiendo realizar variaciones en el estilo basándonos en una condición. Básicamente, podemos realizar condiciones if y bucles en CSS. Las directivas de control de flujo no son complejas si ya estas habituado a la programación ya que el uso de bucles y condiciones son el día a día.

Las estructuras de control en CSS están más centrados en los mixins, que son como funciones. La finalidad es dotar de mayor flexibilidad a la hoja de estilos cuando queremos agregar nuevas reglas.

Condicionales con la directiva @if

Esta directiva toma una expresión y aplica un estilo si la expresión evaluada devuelve true. En caso de que devuelva false, podemos aplicarle otro estilo empleando la directiva @else

Resultado

Podemos combinar un @if con varios varios @else if si queremos comprobar varias condiciones.

En este caso se evalua el valor de la variable $colorFondo. Si no se da ninguna de las 3 primeras condiciones, el fondo será negro.

CSS compilado

Estructuras de control iterativas

@for

Con esta directiva realizamos bucles y ajustamos los estilos basándonos en el valor del contador. Podemos crear un bucle for de 2 formas:

  •  Mediante through:  ($contador from valor_inicio through valor_final)
  •  Empleando to: ($contador from valor_inicio to valor_final)

La diferencia que hay entre ambos métodos es que con through se incluye el valor_final mientras que con to no tiene en cuenta el último valor.

Probemos primero con through donde iremos aplicando estilo a 3 párrafos que son hijos de .contendor

Esto se convertiría en

Y con el ejemplo de to vamos a incrementar el tamaño a medida que aumenta el contador y además, cambiando el selector.

Resultado

En esta ocasión, no llegamos a una cabecera 3 a pesar de indicar que el bucle funcione cuando llegue a 3- Recuerda que con to el valor final no cuenta y sería como una vuelta menos.

@each

Con esta directiva también creamos bucles pero en esta ocasión se proporciona una lista de elementos que determina cuando la operación se ha realizado.

Vamos con un ejemplo sencillo, supongamos que queremos dar estilo a los iconos sociales necesitando llamar a un .png por cada red social. Podemos crear un  bucle con un array que contiene los nombres de los iconos de las redes sociales pudiendo asociar al background-image la red social correspondiente

Resultado

También es posible tener varias variables y listarlas en el @each. En el siguiente ejemplo vamos a usar 2 variables como una en el bucle. Es una pareja $notificación y $color se tratan como una pudiendo generar estilos acordes al tipo de notificación.

Resultado

@while

Cuando emplearnos la directiva @while para crear un bucle no conocemos exactamente la condición necesaria para salir del bucle. En el siguiente ejemplo vamos a dar un tamaño a diferentes elementos mientras la variable $elementos sea superior a 0. Ademas el tamaño será menor a medida que se avance en el bucle al dividir el ancho 100% por el “número de vuelta”.

Tenemos que ir restando a $elmentos ya que de lo contrario nunca se cumpliraria la condición para salir del bucle entrando en un bucle sin fin.

y hasta aquí las estructuras de control en CSS empleando Sass, espero que os haya gustado. A seguir picando 🙂