sass
Lussen en condities

Herhalingslus

De @while instructie loopt over een codeblok totdat de opgegeven voorwaarde vals wordt. In het volgende voorbeeld loopt deze lus tot $font-size <= 18 terwijl de waarde voor $font-size met 2 wordt verhoogd.

$font-size: 12;

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

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

Uitvoer van bovenstaande code

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

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

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

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

for loop

Met de @for richtlijn kunt u bepaalde code doorlopen voor een bepaald aantal iteraties en heeft twee vormen:

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

Het verschil in de twee vormen is het door en het aan ; de doorgaande sleutelwoord omvat de <end> waar zal niet in de lus; gebruiken via is het equivalent van het gebruik van >= of <= in andere talen, zoals C ++, JavaScript of PHP.

Notes

• Zowel <start> als <end> moeten gehele getallen zijn of functies die gehele getallen retourneren.
• Wanneer <start> groter is dan <end> de teller afnemen in plaats van verhogen.

SCSS-voorbeeld

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

Voorwaardelijke richtlijn (indien)

De @if besturingsrichtlijn evalueert een gegeven uitdrukking en als het iets anders dan false retourneert, verwerkt het zijn blok stijlen.

Sass Voorbeeld

$test-variable: true !default

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

.test-selector
  +test-mixin

SCSS-voorbeeld

$test-variable: true !default

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

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

De bovenstaande voorbeelden produceren de volgende CSS:

.test-selector {
  display: block;
}

Elke lus

Met de @each-richtlijn kunt u elke lijst of kaart doorlopen. Het heeft de vorm van @each $var or <list or map> {} waarbij $var elke variabelenaam kan zijn en <list or map> kan zijn dat een lijst of kaart retourneert.

In het volgende voorbeeld doorloopt de lus de $authors $author die elk item toewijst aan $author , verwerkt het blok stijlen met die waarde van $author en gaat u door naar het volgende item in de lijst.

SCSS-voorbeeld

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

CSS-uitvoer

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

Meervoudige opdracht

Met meervoudige toewijzing kunt u eenvoudig toegang krijgen tot alle variabelen door meerdere variabelen te declareren in de @each richtlijn.

Geneste lijsten

Voor gemakkelijke toegang tot alle geneste elementen, kunt u afzonderlijke variabelen declareren die overeenkomen met elk genest element. Zorg ervoor dat u het juiste aantal variabelen en geneste elementen hebt. In het volgende voorbeeld doorloopt elke lus een lijst met drie elementen die elk drie geneste elementen bevatten. Het hebben van het verkeerde aantal gedeclareerde variabelen zal resulteren in een compilerfout.

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

Kaarten

Meerdere toewijzing werkt ook voor Kaarten, maar is beperkt tot slechts twee variabelen, een variabele voor toegang tot de sleutel en een variabele voor toegang tot de waarde. De namen $key en $value zijn willekeurig in het volgende voorbeeld:

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

Elke lus met kaarten / lijstwaarden

In het onderstaande voorbeeld wordt de waarde in map $color-array behandeld als een lijst met paren.

SCSS-invoer

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

CSS-uitvoer

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

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

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