sass
Bucles y Conditones

Mientras bucle

La directiva @while se @while sobre un bloque de código hasta que la condición especificada se vuelva falsa. En el siguiente ejemplo, este bucle se ejecutará hasta que $font-size <= 18 aumente el valor de $font-size en 2.

$font-size: 12;

@while $font-size <= 18 {
    .font-size-#{$font-size} {
        font-size: ($font-size * 1px);
    }

    $font-size: $font-size + 2;
}

Salida del código anterior

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

en bucle

La directiva @for permite recorrer algunos códigos para una cantidad determinada de iteraciones y tiene dos formas:

• @for <var> from <start> through <end> {}
• @for <var> from <start> to <end> {}

La diferencia en las dos formas es el a través y el a ; la palabra clave a través incluirá la <end> en el bucle de dónde no; usar a través de es equivalente a usar >= o <= en otros idiomas, como C ++, JavaScript o PHP.

Notas

• Tanto <start> como <end> deben ser enteros o funciones que devuelvan enteros.
• Cuando <start> es mayor que <end> el contador disminuirá en lugar de incrementarse.

Ejemplo de SCSS

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }

Directiva condicional (si)

La directiva de control @if evalúa una expresión dada y si devuelve algo que no sea false , procesa su bloque de estilos.

Ejemplo de Sass

$test-variable: true !default

=test-mixin
  @if $test-variable
    display: block
  @else
    display: none

.test-selector
  +test-mixin

Ejemplo de SCSS

$test-variable: true !default

@mixin test-mixin() {
  @if $test-variable {
    display: block;
  } @else {
    display: none;
  }
}

.test-selector {
  @include test-mixin();
}

Los ejemplos anteriores producen el siguiente CSS:

.test-selector {
  display: block;
}

Cada bucle

La directiva @each le permite iterar a través de cualquier lista o mapa. Toma la forma de @each $var or <list or map> {} donde $var puede ser cualquier nombre de variable y <list or map> puede ser cualquier cosa que devuelva una lista o mapa.

En el siguiente ejemplo, el bucle recorrerá la lista de $authors asignando cada elemento a $author , procesará su bloque de estilos utilizando ese valor de $author y continuará con el siguiente elemento de la lista.

Ejemplo de SCSS

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

Salida CSS

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

Asignación múltiple

La asignación múltiple le permite acceder fácilmente a todas las variables declarando múltiples variables en la directiva @each .

Listas anidadas

Para tener un acceso fácil a todos los elementos anidados, puede declarar variables separadas para que coincidan con cada elemento anidado. Asegúrese de tener la cantidad correcta de variables y elementos anidados. En el siguiente ejemplo, cada bucle está iterando a través de una lista de tres elementos, cada uno de los cuales contiene tres elementos anidados. Tener la cantidad incorrecta de variables declaradas dará lugar a un error del compilador.

@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;
  }
}

Mapas

La asignación múltiple también funciona para Mapas, pero está limitada a solo dos variables, una variable para acceder a la clave y una variable para acceder al valor. Los nombres $key y $value son arbitrarios en el siguiente ejemplo:

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}

Cada bucle con mapas / valores de lista

En el siguiente ejemplo, el valor en map $color-array se trata como una lista de pares.

Entrada SCSS

$color-array:(
  black: #4e4e4e,                       
  blue: #0099cc,
  green: #2ebc78
);
@each $color-name, $color-value in $color-array {
  .bg-#{$color-name} {
    background: $color-value;
  }
}

Salida CSS

.bg-black {
  background: #4e4e4e;
}

.bg-blue {
  background: #0099cc;
}

.bg-green {
  background: #2ebc78;
}