Phần này sẽ gồm 4 phần chính: IF, FOR, EACH, WHILE

1. if

Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng

p {
  @if 1 + 1 == 2    { border: 1px solid; }
  @if 5 < 3         { border: 2px dotted; }
  @if null          { border: 3px double; }
}

$type: monster;
h3 {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Kết quả

p {
  border: 1px solid;
}
h3 {
  color: green;
}

2. for

Sử dụng vòng lặp @for cho các trường hợp biết trước số lần lặp lại khối lệnh.

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Kết quả

.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }

3. each

Vòng lặp @each dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé

@each $name, $color in (item1, red), (item2, green), (item3, blue) {
  .#{$name} {
    background: url(../images/#{$name}.png);
    color: #{$color};
  }
}

Kết quả

.item1 { 
  background: url(../images/item1.png); 
  color: red; 
}
.item2 { 
  background: url(../images/item2.png); 
  color: green; 
}
.item3 { 
  background: url(../images/item3.png); 
  color: blue; 
}

4. while

Vòng lặp @while sẽ thực hiện lặp đi lặp lại một khối công việc đến khi nào điều kiện đã cho còn là đúng.

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

Kết quả

.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }