Sass(SCSS) At-Rules #5[@each]

@each

  // 구문
  @each <변수> in <표현식> {...}

블록은 지정된 변수 이름에 할당된 목록의 각 요소에 대해 차례로 평가된다.

• SCSS

  $sizes: 40px, 50px, 80px;
  
  @each $size in $sizes {
    .icon-#{$size} {
      font-size: $size;
      height: $size;
      width: $size;
    }
  }

• CSS

  .icon-40px {
    font-size: 40px;
    height: 40px;
    width: 40px;
  }
  
  .icon-50px {
    font-size: 50px;
    height: 50px;
    width: 50px;
  }
  
  .icon-80px {
    font-size: 80px;
    height: 80px;
    width: 80px;
  }

---

with maps

@each를 사용하여 mams의 모든 키/값 쌍을 반복하여 작성할 수 있다.

  // 구문
  @each <변수>, <변수> in <표현식> {...}

키는 첫번째 변수 이름에 할당되고, 요소는 두번째 변수 이름에 할당됩니다.

• SCSS

  $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
  
  @each $name, $glyph in $icons {
    .icon-#{$name}:before {
      display: inline-block;
      font-family: "Icon Font";
      content: $glyph;
    }
  }

• CSS

  @charset "UTF-8";
  .icon-eye:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f112";
  }
  
  .icon-start:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f12e";
  }
  
  .icon-stop:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f12f";
  }

---

Destructuring

목록(list)의 목록(lists)가 있는 경우 @each를 사용하여 내부 목록의 각 값에 변수를 자동으로 할당할 수 있습니다. @each <변수...> in <표현식> {...} 변수가 내부 목록의 구조와 일치하기 때문에 이를 'Destructuring'라고 합니다. 각 변수 이름은 목록의 해당 위치에 있는 값에 할당되며, 목록에 충분한 값이 없으면 null로 지정됩니다.

• SCSS

  $icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;
  
  @each $name, $glyph, $size in $icons {
    .icon-#{$name}:before {
      display: inline-block;
      font-family: "Icon Font";
      content: $glyph;
      font-size: $size;
    }
  }

• CSS

  @charset "UTF-8";
  .icon-eye:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f112";
    font-size: 12px;
  }
  
  .icon-start:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f12e";
    font-size: 16px;
  }
  
  .icon-stop:before {
    display: inline-block;
    font-family: "Icon Font";
    content: "\f12f";
    font-size: 10px;
  }