TIL | SCSS @each

12458 ワード

scss テキストリンク

@eachは、リストおよびMapデータを繰り返すために使用される.
in文に似ています.

@each $변수 in 데이터 {
  // 반복 내용
}

リストデータを繰り返してみましょう.
SCSS

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{fruit} {
      background: url("/images/#{$fruit}.png")
    }
  }
}

⬇️
CSS

.fruits li.apple {
  background: url("/images/apple.png")
}

.fruits li.orange {
  background: url("/images/orange.png")
}

.fruits li.banana {
  background: url("/images/banana.png")
}

.fruits li.mango {
  background: url("/images/mango.png")
}

反復ごとにインデックス値が必要な場合は、次のようにindex()の組み込み関数を使用できます.
SCSS

$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 50px * $i;
    }
  }
}

⬇️
CSS

.fruits li:nth-child(1) {
  left: 50px;
}

.fruits li:nth-child(2) {
  left: 100px
}

.fruits li:nth-child(3) {
  left: 150px;
}

.fruits li:nth-child(4) {
  left: 200px;
}

複数のリストデータを同時に繰り返し処理することもできます.
ただし、各データの長さは同じでなければなりません.
SCSS

$apple: (apple, korea);
$banana: (banana, japan);
$orange: (orange, china);

@each $fruit, $country in $apple, $banana, $orange {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png")
  }
}

⬇️
CSS

.box-apple {
  background: url("/images/korea.png");
}

.box-banana {
  background: url("/images/japan.png");
}

.box-orange {
  background: url("/images/china.png");
}

Mapデータを繰り返す場合、1つのデータには2つの変数が必要です.

@each $key변수, $value변수 in 데이터 {
  // 반복 내용
}

SCSS

$fruits-data: (
  apple: korea,
  banana: japan,
  orange: china
);

@each $fruit, $counrty in $fruits-data {
  .box-#{$fruits} {
    background: url("/images/#{$country}.png")
  }
}

⬇️
CSS

.box-apple {
  background: url("/images/korea.png")
}

.box-japan {
  background: url("/images/japan.png")
}

.box-china {
  background: url("/images/china.png")
}

Reference

この問題について(TIL | SCSS @each), 我々は、より多くの情報をここで見つけました https://velog.io/@junzerokim/TIL-SCSS-each

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

MySQLのalter table

累積和