Articles
Giới thiệu về SASS/SCSS
Câu lệnh điều kiện trong SASS

Câu lệnh điều kiện trong SASS

Bài viết này giải thích các câu lệnh điều kiện trong SASS.

Chúng tôi giải thích rõ ràng mọi thứ từ cơ bản đến nâng cao về cách dùng câu lệnh điều kiện với các chỉ thị @if, @else if và @else, kèm các ví dụ thực tiễn.

YouTube Video

Câu lệnh điều kiện trong SASS

SASS là một ngôn ngữ stylesheet mở rộng CSS, và bạn có thể kiểm soát kiểu dáng một cách linh hoạt bằng các câu lệnh điều kiện. Trong SASS, bạn có thể dùng @if, @else if và @else để chuyển đổi đầu ra kiểu dáng ngay tại thời điểm biên dịch.

Cú pháp điều kiện cơ bản

Các câu lệnh điều kiện cơ bản trong SASS được viết với cú pháp sau.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}
  • @if đánh giá điều kiện đầu tiên, và nếu điều kiện đó sai, các khối @else if hoặc @else sẽ được đánh giá theo thứ tự.

Ví dụ điều kiện đơn giản

Trong ví dụ sau, màu nền được chuyển đổi dựa trên biến $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

CSS sau khi biên dịch 

1body {
2  background-color: #333;
3  color: #fff;
4}
  • Khi $theme là "dark", nền tối và màu chữ trắng sẽ được áp dụng.

Kết hợp điều kiện với tính toán

Các câu lệnh điều kiện không chỉ xử lý so sánh chuỗi và màu sắc, mà còn cả các phép tính số.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

CSS sau khi biên dịch 

1.container {
2  max-width: 1200px;
3}
  • Cũng có thể so sánh số; khi $width vượt quá 1000px, sẽ xuất ra max-width: 1200px.

Điều kiện lồng nhau

Bằng cách lồng các câu lệnh điều kiện, bạn có thể biểu đạt những điều kiện phức tạp.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

CSS sau khi biên dịch 

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}
  • Lồng điều kiện cho phép tạo kiểu dựa trên cả chủ đề và kích thước.

Sử dụng điều kiện trong các hàm tùy chỉnh

Sử dụng điều kiện bên trong các hàm tùy chỉnh có thể cải thiện khả năng tái sử dụng.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

CSS sau khi biên dịch 

1.card {
2  background-color: #333;
3}
  • Bằng cách đóng gói các điều kiện trong hàm, bạn có thể tăng khả năng tái sử dụng và khả năng bảo trì.

Ví dụ thực tế - Chuyển đổi thiết kế

Hãy xem một ví dụ về việc chuyển đổi tổng thể thiết kế dựa trên một số điều kiện nhất định.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

CSS sau khi biên dịch 

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}
  • Bạn có thể chuyển đổi phối màu của toàn bộ trang một cách động theo biến chủ đề.

Lưu ý và thực tiễn tốt nhất

Khi sử dụng các câu lệnh điều kiện trong SASS, bạn có thể cân nhắc các điểm sau.

  1. Giữ điều kiện đơn giản

    Việc lồng ghép phức tạp làm giảm khả năng đọc, vì vậy tận dụng các hàm và mixin sẽ giúp giữ mọi thứ đơn giản.

  2. Trừu tượng hóa bằng biến và hàm

    Nếu bạn dùng các điều kiện tương tự ở nhiều nơi, gom chúng vào biến hoặc hàm sẽ cải thiện khả năng bảo trì.

  3. Tránh logic cồng kềnh

    Thống nhất các quy tắc thiết kế càng nhiều càng tốt và tránh lạm dụng câu lệnh điều kiện.

Kết luận

Các câu lệnh điều kiện trong SASS là công cụ rất hiệu quả để tạo ra các kiểu dáng linh hoạt và động. Tại đây, chúng tôi đã giải thích từng bước mọi thứ từ cơ bản đến các ví dụ thực tế. Khi sử dụng điều kiện trong các dự án thực tế, hãy thiết kế với tư duy mã có thể tái sử dụng và chú ý không làm mọi thứ trở nên quá phức tạp.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

SASS `@at-root`