SCSS @each

• SCSS @each tiện lợi cho việc thiết lập một loạt các giá trị cùng tính chất nhau, đặc biệt là trong danh sách với các thuộc tính gần như là như nhau.
• Cách sử dụng gần giống với cấu trúc for each của PHP.

Ví dụ về SCSS @each

@each 1 giá trị

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

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

• Ta thấy khi giá trị 40px được gọi, thì sẽ chạy hết vòng lặp @each và in ra nội dung vòng lặp, xong sẽ chạy tiếp các giá trị 50px và 80px.

@each nhiều giá trị

$val: (normal, bold, 10px), (emphasis, bold, 15px);
@each $name, $style, $size in $val {
  .#{$name} {
      font-weight: $style;
      text-size: $size;
   }
}

.normal {
    font-weight: bold;
    text-size: 10px;
}
.emphasis {
    font-weight: bold;
    text-size: 15px;
}

• Ta thấy giá trị của $val giống như mãng 2 chiều, các giá trị $name, $style, $size sẽ tương ứng với một nhóm giá trị của $val.

@each với giá trị dạng map

$val: (default: normal,  emphasis: bold);
@each $name, $style in $val {
   .#{$name} {
      font-weight: $style;
  }
}

.normal {
    font-weight: bold;
}
.emphasis {
    font-weight: bold;
}

• Tới đây ta đã hoàn thành nội dung của bài học SCSS @each, ứng dụng của @each rất lớn, các bạn từ từ khám phá thêm nhé.