sass
Loops and Conditons

Medan slinga

Direktivet @while över ett kodblock tills det angivna villkoret blir falskt. I följande exempel körs denna slinga tills $font-size <= 18 samtidigt som värdet för $font-size ökar med 2.

$font-size: 12;

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

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

Output av ovanstående kod

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

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

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

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

för slinga

Direktivet @for låter dig gå igenom någon kod för en viss mängd iterationer och har två former:

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

Skillnaden i de två formerna är genom och till ; det genomgående nyckelordet kommer att inkludera <end> i slingan där det inte kommer; att använda genom är ekvivalent med att använda >= eller <= på andra språk, till exempel C ++, JavaScript eller PHP.

anteckningar

• Både <start> och <end> måste vara heltal eller funktioner som returnerar heltal.
• När <start> är större än <end> kommer räknaren att minska istället för steg.

SCSS-exempel

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

Villkorat direktiv (om)

@if kontrolldirektivet utvärderar ett visst uttryck och om det returnerar något annat än false bearbetar det sitt block av stilar.

Sass Exempel

$test-variable: true !default

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

.test-selector
  +test-mixin

SCSS-exempel

$test-variable: true !default

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

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

Ovanstående exempel producerar följande CSS:

.test-selector {
  display: block;
}

Varje slinga

Direktivet om @each låter dig iterera genom valfri lista eller karta. Det har formen av @each $var or <list or map> {} där $var kan vara vilken variabel som helst och <list or map> kan vara allt som returnerar en lista eller karta.

I följande exempel kommer slingan att iterera genom $authors tilldelar varje objekt till $author , bearbetar sitt block med stilar med det värdet för $author och fortsätter till nästa objekt i listan.

SCSS-exempel

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

CSS-utgång

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

Flera uppdrag

Med flera tilldelningar kan du få enkel åtkomst till alla variabler genom att deklarera flera variabler i @each direktivet.

Kapslade listor

För att ha enkel åtkomst till alla kapslade element kan du förklara separata variabler som matchar varje kapslade element. Se till att du har rätt mängd variabler och kapslade element. I följande exempel iterererar varje slinga genom en lista med tre element som var och en innehåller tre element kapslade. Att ha fel mängd deklarerade variabler kommer att resultera i ett kompilatorfel.

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

Kartor

Flera tilldelningar fungerar också för kartor men är begränsade till endast två variabler, en variabel för att komma åt nyckeln och en variabel för att få åtkomst till värdet. Namnen $key och $value är godtyckliga i följande exempel:

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

Varje slinga med kartor / listvärden

I exemplet nedan behandlas värdet på kartan $color-array som en lista över par.

SCSS-ingång

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

CSS-utgång

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

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

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