sass
Pętle i warunki

Podczas pętli

Dyrektywa @while będzie zapętlać blok kodu, dopóki określony warunek nie zostanie spełniony. W poniższym przykładzie ta pętla będzie działać do $font-size <= 18 , zwiększając wartość $font-size o 2.

$font-size: 12;

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

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

Wyjście powyższego kodu

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

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

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

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

dla pętli

Dyrektywa @for pozwala na przeglądanie kodu dla określonej liczby iteracji i ma dwie formy:

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

Różnica w obu tych postaci przelotowych i do; przelotowego hasła będzie zawierał <end> gdzie nie będzie w pętlę; używanie poprzez jest równoważne użyciu >= lub <= w innych językach, takich jak C ++, JavaScript lub PHP.

Notatki

• Zarówno <start> i <end> muszą być liczbami całkowitymi lub funkcjami zwracającymi liczby całkowite.
• Gdy <start> jest większy niż <end> licznik zmniejszy się zamiast zwiększyć.

Przykład 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; }

Dyrektywa warunkowa (jeśli)

@if sterująca @if ocenia dane wyrażenie i jeśli zwraca coś innego niż false , przetwarza blok stylów.

Przykład Sassa

$test-variable: true !default

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

.test-selector
  +test-mixin

Przykład SCSS

$test-variable: true !default

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

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

Powyższe przykłady generują następujący CSS:

.test-selector {
  display: block;
}

Każda pętla

Dyrektywa @each umożliwia iterację po dowolnej liście lub mapie. Przybiera postać @each $var or <list or map> {} gdzie $var może być dowolną nazwą zmiennej, a <list or map> może oznaczać wszystko, co zwraca listę lub mapę.

W poniższym przykładzie pętla będzie iterować listę $authors przypisując każdy element do $author , przetworzy swój blok stylów przy użyciu tej wartości $author i przejdzie do następnego elementu na liście.

Przykład SCSS

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

Wyjście 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;
}

Wiele zadań

Wielokrotne przypisanie pozwala uzyskać łatwy dostęp do wszystkich zmiennych poprzez zadeklarowanie wielu zmiennych w dyrektywie @each .

Listy zagnieżdżone

Aby mieć łatwy dostęp do wszystkich zagnieżdżonych elementów, możesz zadeklarować osobne zmienne pasujące do każdego zagnieżdżonego elementu. Upewnij się, że masz odpowiednią liczbę zmiennych i zagnieżdżonych elementów. W poniższym przykładzie każda pętla przechodzi przez listę trzech elementów, z których każdy zawiera trzy zagnieżdżone elementy. Nieprawidłowa liczba zadeklarowanych zmiennych spowoduje błąd kompilatora.

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

Mapy

Wielokrotne przypisanie działa również w Mapach, ale jest ograniczone tylko do dwóch zmiennych, zmiennej dostępu do klucza i zmiennej dostępu do wartości. Nazwy $key i $value są arbitralne w następującym przykładzie:

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

Każda pętla z wartościami map / list

W poniższym przykładzie wartość w map $color-array jest traktowana jako lista par.

Wejście SCSS

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

Wyjście CSS

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

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

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