Cách sử dụng if else và vòng lặp trong Sass

Mỗi lần setup dựng layout cho một dự án mới là tôi rất mệt mõi, vì phải xây dựng các file từ đầu nếu không có sẵn… Xây dựng từ cấu trúc các folder thư mục… Giả sử mình muốn xây dựng 1 1 hệ thống responsive layout cho nhiều thiết bị (Desktop, Tablet, Mobile hoặc cả Tablet và Mobile), hay tạo các .col-1 đến col-12 (thường được thấy & dùng trong xây dựng Grid system đặc biệt là Bootstrap), hoặc áp dụng theme “light” / “dark” nếu mình viết bằng tay thì rất tốn thời gian và dễ sai sót.
Vậy làm sao để viết 1 lần – dùng cho nhiều nơi và dễ bảo trì sau này nhất? Hãy cùng mình tìm hiểu “Cách sử dụng if else và vòng lặp trong Sass” xử lý vấn đề trên nhé. Let go ~~

1. Câu điều kiện trong Sass – @if, @else if, @else

Trong CSS thuần, mình không thể tuỳ biến logic theo biến, nhưng trong Sass mình có thể làm điều đó với @if

@if <điều_kiện> {
  // chạy nếu đúng
} @else if <điều_kiện_khác> {
  // chạy nếu cái trên sai
} @else {
  // chạy nếu tất cả đều sai
}

Ví dụ: Chuyển theme tự động

$theme: dark;

body {
  @if $theme == dark {
    background-color: #121212;
    color: white;
  } @else if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: gray;
  }
}

Debug bằng:

@debug $theme; // In ra "dark"

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

body {
background-color: #121212;
color: white;
}

2. Vòng lặp trong Sass

Vòng lặp giúp lặp lại đoạn mã một cách thông minh và linh hoạt.

@for – Lặp theo chỉ số

Cấu trúc như sau:

@for $i from 1 through 5 {
  .col-#{$i} {
    width: #{100% / $i};
  }
}

Kết quả:

.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33.333%; }
.col-4 { width: 25%; }
.col-5 { width: 20%; }

@each – Lặp qua danh sách

Cấu trúc:

$colors: red, green, blue;

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

Kết quả:

.text-red { color: red; }
.text-green { color: green; }
.text-blue { color: blue; }

@While – Lặp khi điều kiện còn đúng

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    font-size: #{10px * $i};
  }
  $i: $i + 1;
}

Kết quả:

.item-1 { font-size: 10px; }
.item-2 { font-size: 20px; }
.item-3 { font-size: 30px; }

3. Cách kiểm tra (debug) vòng lặp / điều kiện trong Sass

@debug $i;        // In ra số thứ tự trong vòng lặp
@debug $color;    // In ra từng màu khi chạy @each
@debug $theme;    // In ra theme hiện tại

4. Tổng kết kiến thức cần nhớ

Bảng tổng kết kiến thức cách sử dụng if else và vòng lặp trong Sass

List dễ nhớ các kiểu lặp trong Sass:

<strong>@for</strong>

• Dùng khi bản thân mình biết rõ số lần lặp (vd: từ 1 đến 5)
• Dễ hiểu, gọn gàn
• from 1 through 5: Lặp từ 1 đến cả 5 – muốn bao gồm số cuối
• from 1 to 5 : Lặp từ 1 đến 4, không lấy 5 (để tránh lỗi tràn biên trong số trường hợp) – muốn dừng trước số cuối

@while

• Dùng khi lặp phụ thuộc vào điều kiện
• Phải cập nhật biến thủ công ($number: $number + 1) nếu không sẽ bị lặp vô hạn…(@Debug sẽ biết)
• Linh hoạt hơn @for nếu logic phức tạp.

@each

• Dùng cho giá trị dạng list/map
• Lặp qua từng phần tử trong list hoặc từng key/value trong map
• Tuyệt vời khi làm việc với theme, màu, font, hay responsive breakpoint