sass
Loop e conditons

Mentre loop

La direttiva @while eseguirà un ciclo su un blocco di codice finché la condizione specificata non diventa falsa. Nell'esempio seguente, questo ciclo verrà eseguito fino a $font-size <= 18 durante l'incremento del valore per $font-size per 2.

$font-size: 12;

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

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

Uscita del codice precedente

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

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

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

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

per ciclo

La direttiva @for consente di eseguire il looping di alcuni codici per una quantità prestabilita di iterazioni e ha due forme:

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

La differenza tra le due forme è il tramite e il a ; la parola chiave attraverso includerà il <end> nel circuito dove non lo farà; usare through è l'equivalente di usare >= o <= in altri linguaggi, come C ++, JavaScript o PHP.

Gli appunti

• Sia <start> che <end> devono essere numeri interi o funzioni che restituiscono numeri interi.
• Quando <start> è maggiore di <end> il contatore decrementa invece di incrementare.

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

Direttiva condizionale (se)

La direttiva di controllo @if valuta una determinata espressione e se restituisce qualcosa di diverso da false , elabora il suo blocco di stili.

Sass Esempio

$test-variable: true !default

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

.test-selector
  +test-mixin

Esempio SCSS

$test-variable: true !default

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

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

Gli esempi precedenti producono il seguente CSS:

.test-selector {
  display: block;
}

Ogni ciclo

La direttiva @each ti consente di scorrere qualsiasi elenco o mappa. Prende la forma di @each $var or <list or map> {} dove $var può essere un qualsiasi nome di variabile e <list or map> può essere qualsiasi cosa che restituisca un elenco o una mappa.

Nell'esempio seguente, il ciclo eseguirà l'iterazione dell'elenco $authors assegnando ciascun elemento a $author , elaborerà il suo blocco di stili utilizzando quel valore di $author e passerà all'elemento successivo nell'elenco.

Esempio SCSS

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

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

Assegnazione multipla

L'assegnazione multipla consente di accedere facilmente a tutte le variabili dichiarando più variabili nella direttiva @each .

Elenchi nidificati

Per avere un facile accesso a tutti gli elementi nidificati, è possibile dichiarare variabili separate per abbinare ogni elemento nidificato. Assicurati di avere la giusta quantità di variabili e elementi nidificati. Nell'esempio seguente, ogni loop sta iterando attraverso un elenco di tre elementi ciascuno dei quali contiene nested di tre elementi. Avere la quantità sbagliata di variabili dichiarate comporterà un errore del compilatore.

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

Mappe

L'assegnazione multipla funziona anche per Maps ma è limitata a solo due variabili, una variabile per accedere alla chiave e una variabile per accedere al valore. I nomi $key e $value sono arbitary nel seguente esempio:

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

Ogni ciclo con mappe / valori di lista

Nel seguente valore di esempio nella mappa $color-array è trattato come un elenco di coppie.

Ingresso SCSS

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

Output CSS

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

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

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