Chỉ thị @for trong SASS

Với chỉ thị @for có thể xuất ra các style xác định với số lượng được chỉ định bởi một biến đếm. Cách viết đầu tiên của @for trông như sau:

scss@for $var from (begin) through (end)

Trong trường hợp này, phạm vi bao gồm nghiêm ngặt các giá trị (begin) và (end). Cần lưu ý rằng (begin) và (end) - phải trả về số nguyên, vì chúng xác định hướng đếm, tức là nếu (begin) nhỏ hơn (end), bộ đếm sẽ tăng và tương ứng, nếu ngược lại - sẽ giảm.

Chúng ta hãy xem xét hoạt động của chỉ thị @for ở cách viết cú pháp đầu tiên trong ví dụ sau:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Kết quả biên dịch:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

Trong cách viết thứ hai, trông như sau:

scss@for $var from (begin) to (end)

Ở đây giá trị (end) bị loại bỏ.

Hãy lấy ví dụ trước và viết nó theo cách thứ hai:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Bây giờ hãy chú ý đến mã kết quả:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}