SCSS @while

• SCSS @while sẽ lặp nội dung bên trong while trong khi vẫn còn thỏa điều kiện ban đầu.

Ví dụ về SCSS @while

Thực hiện lặp theo số lần từ 1 tới giá trị cho trước

$i: 4;
@while $i > 0 {
    .item-#{$i} {
        width: 800px/$i;
        $i: $i - 1;
    }
}

.item-4 {
    width: 200px;
}
.item-3 {
    width: 266.66667px;
}
.item-2 {
    width: 400px;
}
.item-1 {
    width: 800px;
}

Thực hiện lặp theo số lần từ giá trị bất kỳ

$i: 3;
@while $i < 5 {
    .item-#{$i} {
        color: red;
        $i : $i + 1;
    }
}

.item-3 {
    color: red;
}

.item-4 {
    color: red;
}