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:

@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:

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

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

.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:

@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:

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

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

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Hãy nói kết quả biên dịch của mã sau sẽ là gì:

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

Hãy nói kết quả biên dịch của mã sau sẽ là gì:

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