SCSS @for

SCSS @for

  • SCSS @for thường được dùng để tác động tới danh sách, với tính chất tăng dần.

Ví dụ về SCSS @for

Tạo độ giảm giần opacity

SCSS CSS 
$lenght: 5;
@for $i from 1 through $lenght {
    .item-#{$i} {
        opacity: 1/$i;
    }
}
 
.item-1 {
    opacity: 1;
}
.item-2 {
    opacity: 0.5;
}
.item-3 {
    opacity: 0.33333;
}
.item-4 {
    opacity: 0.25;
}
.item-5 {
    opacity: 0.2;
}
  • Nội dung trên có nghĩa là: lặp cho nội dung bên trong @for sao cho $i chạy từ 1 cho tới $length.

Tạo chiều rộng tự động theo số cột

SCSS CSS 
$total-cols: 8;
@function column-width($col) {
    @return percentage($col/$total-cols);
}
@for $i from 1 through $total-cols {
    .col-#{$i} { width: column-width($i) };
}
 
.col-1 {
    width: 12.5%;
}
.col-2 {
    width: 25%;
}
.col-3 {
    width: 37.5%;
}
.col-4 {
    width: 50%;
}
.col-5 {
    width: 62.5%;
}
.col-6 {
    width: 75%;
}
.col-7 {
    width: 87.5%;
}
.col-8 {
    width: 100%;
}

Sử dụng cho :nth-child

SCSS CSS 
$base-color: #036;
@for $i from 1 through 3 {
    ul:nth-child(3n + #{$i}) {
         background-color: lighten($base-color, $i * 5%);
    }
}
 
ul:nth-child(3n + 1) {
    background-color: #004080;
}
ul:nth-child(3n + 2) {
    background-color: #004d99;
}
ul:nth-child(3n + 3) {
    background-color: #0059b3;
}

SCSS - câu lệnh @if @else

SCSS - vòng lặp @while