Các toán tử trong SASS

Bài viết này giải thích các toán tử trong SASS.

Chúng tôi sẽ giải thích các toán tử trong SASS bằng các ví dụ thực tế.

YouTube Video

Các toán tử trong SASS

Các toán tử SASS bao gồm các phép toán số học, so sánh, logic và thao tác với chuỗi.

Toán tử số học (cộng, trừ, nhân, chia, lấy dư)

SASS hỗ trợ các phép toán số học tiêu chuẩn, nhưng toán tử chia / dễ nhầm lẫn với / trong CSS nên nên sử dụng math.div(). Các con số có thể có đơn vị, và các phép toán chỉ có thể thực hiện giữa các đơn vị tương thích.

Dưới đây là các ví dụ về phép toán đơn giản và cách sử dụng mô-đun math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Đoạn mã này là ví dụ về phép cộng và nhân với đơn vị px, và phép chia sử dụng math.div().
• Các đơn vị không tương thích như 10px + 2em sẽ gây lỗi hoặc cho kết quả ngoài ý muốn. Nên chuẩn hóa đơn vị hoặc sử dụng các hàm unit() và unitless().

Xử lý và tự động chuyển đổi đơn vị

SASS xử lý các số có đơn vị và quy tắc về đơn vị của kết quả tính toán tuân theo các quy tắc vật lý phổ thông. Ví dụ, px/px sẽ trở thành giá trị không có đơn vị. Cần cẩn trọng khi xử lý đơn vị với hàm unit() hoặc sau khi sử dụng math.div().

Dưới đây là các ví dụ về cách xử lý giá trị có đơn vị và không có đơn vị.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Nhân các giá trị có hoặc không có đơn vị sẽ cho kết quả như mong đợi, nhưng cần chú ý đến đơn vị của kết quả (hoặc không có đơn vị) khi chia.

Toán tử so sánh (==, !=, <, >, <=, >=)

SASS có các toán tử so sánh, có thể sử dụng trong điều kiện nhánh (@if) và mixin. Việc so sánh các kiểu phức tạp như màu sắc, danh sách tuân theo quy tắc riêng. Lưu ý rằng so sánh màu sắc có thể khác nhau tùy thuộc vào không gian màu.

Dưới đây là ví dụ so sánh hai số và phân nhánh style.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Có thể kết hợp toán tử so sánh với @if để tạo style phản hồi và điều kiện.

Toán tử logic (and, or, not)

SASS hỗ trợ các toán tử and, or, và not. Sử dụng and/or để kết hợp nhiều điều kiện. Có thể làm rõ thứ tự thực hiện toán tử bằng dấu ngoặc đơn.

Dưới đây là ví dụ xử lý điều kiện phức tạp bằng toán tử logic.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• Có thể làm rõ thứ tự ưu tiên của and và or bằng dấu ngoặc đơn. Với các điều kiện phức tạp, sử dụng dấu ngoặc giúp mã dễ đọc và an toàn hơn.

Toán tử chuỗi — Nối chuỗi và chèn biến

Trong SASS, có thể nối chuỗi bằng toán tử + hoặc chèn biến với #{}. Kết quả của toán tử + phụ thuộc vào chuỗi bên trái có dấu ngoặc kép hay không, vì vậy nên dùng chèn biến #{} an toàn hơn.

Dưới đây là ví dụ về nối chuỗi và chèn biến.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Sử dụng chèn biến #{} giúp tránh các vấn đề liên quan đến dấu ngoặc kép và khoảng trắng không mong muốn.

Toán học màu sắc (không còn được khuyến khích)

Trước đây, SASS hỗ trợ 'phép toán màu sắc', cho phép bạn cộng hoặc trừ số với màu sắc. Tuy nhiên, phép toán màu sắc hiện đã bị loại bỏ, và bạn nên sử dụng các hàm trong mô-đun sass:color để thao tác với màu sắc.

Dưới đây là ví dụ cho thấy phép toán trên màu sắc đã bị loại bỏ và gợi ý các giải pháp thay thế.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Nếu bạn muốn thao tác với màu sắc, hãy sử dụng các hàm từ mô-đun sass:color.

Dấu ngoặc đơn và thứ tự ưu tiên toán tử

Sử dụng dấu ngoặc đơn để kiểm soát thứ tự thực hiện phép toán. Các phép toán trong dấu ngoặc sẽ được thực hiện trước các phép toán bên ngoài. Nên dùng dấu ngoặc đơn trong biểu thức phức tạp để mã dễ đọc hơn.

Dưới đây là các ví dụ làm rõ thứ tự thực hiện với dấu ngoặc đơn.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Giống như toán học, quy tắc về thứ tự ưu tiên được áp dụng, hãy sử dụng dấu ngoặc đơn để đảm bảo phép toán thực hiện đúng ý định.

Tóm tắt

Khi sử dụng toán tử trong SASS, cần viết mã sao cho dễ đọc và có khả năng tương thích về sau. Với các biểu thức phức tạp, hãy làm rõ thứ tự tính toán bằng dấu ngoặc đơn và ưu tiên tính dễ đọc của mã.

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