Hàm `if` trong SASS

Bài viết này giải thích về hàm if trong SASS.

Chúng ta sẽ đi qua mọi thứ từ những kiến thức cơ bản về hàm if đến các kỹ thuật nâng cao, từng bước một.

YouTube Video

Hàm if trong SASS

Hàm if() là một hàm điều kiện đơn giản do SASS cung cấp, trả về một trong hai giá trị dựa trên điều kiện boolean. Nó tương tự toán tử ba ngôi của JavaScript.

Cú pháp

Cú pháp như sau:.

1// if(condition, trueValue, falseValue)

• Nếu condition là true, nó trả về trueValue; nếu false, nó trả về falseValue.

Cách sử dụng cơ bản

Ví dụ, bạn có thể dùng hàm if() để thay đổi màu nền và màu chữ tùy thuộc chủ đề là tối hay sáng.

Mã mẫu

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• Nếu biến $theme là "dark", nền sẽ là màu đen với chữ màu trắng; nếu là "light", nền sẽ là màu trắng với chữ màu đen.

CSS được tạo ra

1body {
2  background-color: black;
3  color: white;
4}

• Vì biến $theme là "dark", nền màu đen với chữ màu trắng.

Sự khác biệt giữa câu lệnh @if và hàm if()

Sass cung cấp câu lệnh @if và hàm if() để rẽ nhánh theo điều kiện, nhưng chúng được dùng cho những mục đích khác nhau.

Mã mẫu

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• Câu lệnh @if kiểm soát mã nào được xuất ra khi Sass biên dịch.
• Ngược lại, hàm if() trả về một giá trị và được dùng để chuyển đổi giá trị một cách động trong các biểu thức.

CSS được tạo ra

1body {
2  background-color: black;
3  color: white;
4}

• Trong ví dụ này, vì $theme là "dark", màu nền đen và màu chữ trắng được áp dụng.
• Hai điểm khác biệt chính là câu lệnh @if kiểm soát cấu trúc, còn hàm if() trả về một giá trị.

Sử dụng các hàm if lồng nhau

Khi cần rẽ nhánh phức tạp, bạn có thể lồng các hàm if.

Mã mẫu

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• Nếu $theme là "dark" thì trả về màu đen; nếu "light" thì trả về màu trắng; ngược lại trả về giá trị mặc định ($custom-color).

CSS được tạo ra

1body {
2  background-color: blue;
3}

• Vì biến $theme là custom, màu nền là xanh dương.

Các trường hợp sử dụng thực tế

Chuyển đổi chủ đề

Dưới đây là ví dụ thay đổi kiểu của nút dựa trên chủ đề.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• Đoạn mã này là ví dụ điều kiện trong SASS, chuyển đổi màu nền, màu chữ và màu viền của nút dựa trên giá trị biến $theme. Hàm if() được dùng để đặt kiểu một cách động cho các chủ đề tối và sáng.

CSS được tạo ra

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• Bằng cách chuyển chủ đề, bạn có thể thay đổi đồng bộ tổng thể thiết kế.

Ví dụ nâng cao: Thiết lập độ tương phản màu một cách động

Hãy xem một ví dụ tự động đặt màu chữ dựa trên màu nền.

Mã mẫu

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• Hàm color.channel() được dùng để lấy độ sáng (lightness) của màu nền. Nếu giá trị đó lớn hơn 50% thì chọn màu đen; nếu nhỏ hơn thì chọn màu trắng làm màu chữ, tự động tối ưu độ tương phản với nền.

CSS được tạo ra

1body {
2  background-color: #000;
3  color: white;
4}

• Bằng cách sử dụng hàm if(), bạn có thể triển khai các kiểu dáng linh hoạt có tính đến khả năng tiếp cận trong thiết kế, chẳng hạn như điều chỉnh độ tương phản.

Kết hợp với @function

Sử dụng hàm if bên trong @function cho phép thiết kế kiểu linh hoạt hơn nữa.

Mã mẫu

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• Đoạn mã này minh họa việc dùng if() trong @function để trả về màu phù hợp dựa trên chủ đề và loại màu. Điều này cho phép thiết kế kiểu nhất quán và có thể tái sử dụng cho từng chủ đề.

CSS được tạo ra

1body {
2  background-color: black;
3  color: white;
4}

• Bằng cách tạo và sử dụng các hàm trợ giúp tận dụng hàm if(), bạn có thể cải thiện khả năng bảo trì của toàn bộ dự án.

Ghi chú

1. Hàm if không thể dùng với các giá trị động Bởi vì CSS tự thân là một ngôn ngữ tĩnh, hàm if xác định giá trị tại thời điểm SASS được biên dịch. Đối với logic điều kiện lúc chạy (runtime), bạn cần dùng JavaScript.

2. Ưu tiên tính dễ đọc Vì các hàm if lồng nhau có thể trở nên phức tạp và làm giảm tính dễ đọc, bạn có thể sử dụng SASS @mixin và @function khi cần để tổ chức mã của mình.

Kết luận

Hàm if của SASS là một công cụ mạnh mẽ, trả về các giá trị khác nhau tùy theo điều kiện. Nó hữu ích không chỉ cho các điều kiện đơn giản mà còn trong nhiều trường hợp như chuyển đổi chủ đề và thiết lập kiểu động. Tuy nhiên, khi xử lý các điều kiện phức tạp, hãy chú ý đến tính dễ đọc và tận dụng @mixin cùng @function để cải thiện khả năng bảo trì.

Bằng cách nắm vững hàm if, bạn có thể đạt được thiết kế kiểu hiệu quả và linh hoạt hơn.

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