sass
ループと条件

whileループ

@whileディレクティブは、指定された条件がfalseになるまで、コードブロックをループします。次の例では、 $font-size <= 18までこのループが実行され、 $font-size <= 18の値が$font-size増加します。

$font-size: 12;

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

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

上記のコードの出力

.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ループ

@forディレクティブを使用すると、設定した量の反復でコードをループさせることができ、次の2つの形式があります。

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

2つの形式の違いは、 throughとtoです。キーワードスルー含む<end>ここでしようとしないループで、 throughを使用することは、C ++、JavaScript、PHPなどの他の言語で>=または<=を使用することと同じです。

ノート

• <start>と<end>は整数または整数を返す関数でなければなりません。
• <start>が<end>より大きい場合、カウンタはインクリメントの代わりにデクリメントされます。

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

条件付きディレクティブ（if）

@if controlディレクティブは与えられた式を評価し、 false以外の何かを返した場合、そのスタイルブロックを処理します。

サスの例

$test-variable: true !default

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

.test-selector
  +test-mixin

SCSSの例

$test-variable: true !default

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

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

上記の例では、次のCSSが生成されます。

.test-selector {
  display: block;
}

各ループ

@eachディレクティブを使用すると、任意のリストまたはマップを反復処理できます。 @each $var or <list or map> {}の形式をとります。 $varは任意の変数名で、 <list or map>は<list or map>を返すものです。

次の例では、ループは$authorsリストを反復して各アイテムを$author割り当て、その$author値を使用してスタイルブロックを処理し、リストの次のアイテムに進みます。

SCSSの例

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

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

複数の割り当て

複数の代入を使用すると、 @eachディレクティブで複数の変数を宣言することで、すべての変数に簡単にアクセスできます。

ネストされたリスト

すべてのネストされた要素に簡単にアクセスできるようにするには、それぞれのネストされた要素に一致する別の変数を宣言することができます。正しい量の変数と入れ子要素があることを確認してください。次の例では、各ループが3つの要素のリストを反復しています。それぞれの要素には、3つの要素がネストされています。間違った量の宣言された変数を持つと、コンパイラエラーが発生します。

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

地図

複数の割り当てはマップに対しても機能しますが、キーにアクセスする変数とその値にアクセスする変数の2つの変数のみに制限されています。 $keyと$valueという名前は、次の例では任意です。

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

マップ/リスト値を持つ各ループ

次の例では、 $color-arrayマップの値はペアのリストとして扱われます。

SCSS入力

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

CSS出力

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

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

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