Estructuras de control en CSS mediante Sass

CSS / 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

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.contenedor{
    width:50px;
    height:50px;
}
 
$colorear : true !default;
 
.contenedor{
  @if $colorear{
    background-color: #0080C3;
  }
  @else{
    background-color: transparent;
  }
}

Resultado

CSS
1
2
3
.contenedor {
  background-color: #0080C3;
}

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

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
$colorFondo: verde;
 
.contenedor {
  @if $colorFondo == rojo {
    background-color: #f00;
  } @else if $colorFondo == verde {
    background-color: #0f0;
  } @else if $colorFondo == azul {
    background-color: #00f;
  } @else {
    background-color: #000;
  }
}

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

CSS
1
2
3
.contenedor {
  background-color: #0f0;
}

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

Sass
1
2
3
4
5
6
7
@for $hijo from 1 through 3 {
    
     .contenedor p:nth-child( #{$hijo} )
     {
          font-size: 2em;
     }
}

Esto se convertiría en

CSS
1
2
3
4
5
6
7
8
9
10
11
.contenedor p:nth-child(1) {
  font-size: 2em;
}
 
.contenedor p:nth-child(2) {
  font-size: 2em;
}
 
.contenedor p:nth-child(3) {
  font-size: 2em;
}

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

Sass
1
2
3
@for $tamano from 1 to 3 {
  .cabecera-#{$tamano} { font-size: 2em * $tamano; }
}

Resultado

CSS
1
2
3
4
5
6
7
.cabecera-1 {
  font-size: 2em;
}
 
.cabecera-2 {
  font-size: 4em;
}

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

Sass
1
2
3
4
5
6
7
8
9
$redes: twitter facebook google;
 
@each $red in $redes {
  .#{$red} {
    background-image: url(/imagenes/iconos/#{$red}.png);
    width:25px;
    height:25px;
  }
}

Resultado

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.twitter {
  background-image: url(/imagenes/iconos/twitter.png);
  width: 25px;
  height: 25px;
}
 
.facebook {
  background-image: url(/imagenes/iconos/facebook.png);
  width: 25px;
  height: 25px;
}
 
.google {
  background-image: url(/imagenes/iconos/google.png);
  width: 25px;
  height: 25px;
}

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.

Sass
1
2
3
4
5
@each $notificacion, $color in (exito, green),(aviso, amber),(error,red) {
  .#{$notificacion}-icon {
    background-color: $color;
  }
}

Resultado

CSS
1
2
3
4
5
6
7
8
9
10
11
.exito-icon {
  background-color: green;
}
 
.aviso-icon {
  background-color: amber;
}
 
.error-icon {
  background-color: red;
}

@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».

Sass
1
2
3
4
5
6
7
8
9
$elementos: 3;
 
@while $elementos > 0 {
  
  .caja-#{$elementos} {
    width: 100% / $elementos;
  }
  $elementos: $elementos - 1;
}

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.

CSS
1
2
3
4
5
6
7
8
9
10
11
.caja-3 {
  width: 33.33333%;
}
 
.caja-2 {
  width: 50%;
}
 
.caja-1 {
  width: 100%;
}

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