Cùng tìm hiểu Toán Tử & Nội Suy Trong Sass – Viết CSS Mượt Như Lụa!

Bản thân bạn có từng khi nào rơi vào hoàn cảnh viết đi viết lại một đoạn CSS đến mức muốn “tắt VS Code đi và làm lại cuộc đời” :))? Hay copy–paste biến trong Sass mà lỡ quên sửa chỗ này chỗ kia, khiến trang web trông như vừa trải qua một cuộc khủng hoảng nhận diện thương hiệu? Đừng lo, vì bạn sắp gặp “hai người bạn” cực kỳ quyền lực trong Sass: Toán tử và nội suy biến. Chúng không chỉ giúp bạn viết CSS thông minh hơn. Hãy cùng mình tìm hiểu chúng nhé ~ Let go…

Mục lục Hiển thị

1. Toán tử trong Sass là gì?

Trong CSS thuần, bạn muốn tính toán cái gì đó width: 100% / 3 là phải tự làm trên máy tính hoặc Google cho lẹ. Nhưng với Sass, bạn có thể để trình biên dịch lo giùm bạn – nhờ vào toán tử.

Nói đơn giản, toán tử trong Sass là những ký hiệu cho phép bạn thực hiện các phép tính trực tiếp trong file .sass. Chúng biến Sass từ ngôn ngữ viết CSS linh hoạt thành một công cụ tính toán linh hoạt nhứ học sinh giỏi toán cấp 3 vậy đó.

1.1 Các loại toán tử phổ biến trong Sass

Dưới đây là những loại toán tử bạn sẽ gặp thường xuyên nhất trong Sass:
1. Toán tử số học

cho phép cộng, trừ, nhân, chia, lấy phần trăm như đang cầm một cái máy tính Casino :v

Toán tử	Ý nghĩa	Ví dụ
`+`	Cộng	`width: 50px + 10px`
`-`	Trừ	`height: 100% - 20px`
`*`	Nhân	`font-size: 2 * 1.2rem`
`/`	Chia	`width: 100% / 3`
`%`	Chia lấy dư	`margin: 10 % 3` (ít dùng nhưng vẫn có)

Bảng Toán tử Số học (Arithmetic Operators)

Lưu ý: Phép chia / trong Sass chỉ thực hiện phép chia nếu ít nhất một bên là số. Nếu cả hai là biến hoặc giá trị không xác định đơn vị rõ ràng, bạn có thể bị lỗi hoặc cần dùng hàm math.div() trong Dart Sass mới.

2. Toán tử số học

Dùng trong các biểu thức điều kiện (@if, @else) để kiểm tra giá trị:

Toán tử	Ý nghĩa	Ví dụ	Kết quả
`==`	So sánh bằng	`$a == $b`	true/false
`!=`	So sánh khác	`$a != $b`	true/false
`>`	Lớn hơn	`$a > $b`	true/false
`<`	Nhỏ hơn	`$a < $b`	true/false
`>=`	Lớn hơn hoặc =	`$a >= $b`	true/false
`<=`	Nhỏ hơn hoặc =	`$a <= $b`	true/false

Bảng Toán tử Quan hệ (Comparison Operators)

3. Toán tử logic

Dùng để kết hợp nhiều điều kiện, giống như đang viết JavaScript mini vậy:

Toán tử	Ý nghĩa	Ví dụ	Kết quả
`and`	Và	`$isLarge and $isEnabled`	true/false
`or`	Hoặc	`$isSmall or $isDisabled`	true/false
`not`	Phủ định	`not $isVisible`	true/false

Bảng Toán tử Logic (Logical Operators)

Ví dụ:

@if $darkMode and not $isDisabled { 
background-color: black; 
}

Tổng kết:

Dùng để tính toán giá trị (kích thước, khoảng cách,…)
Kết hợp với biến để viết Sass động
Cực kỳ quan trọng trong mixin, function, và responsive design

Tóm gọn lại: Toán tử trong Sass giúp mình xử lý Sass, tính toán số học và kiểm tra điều kiện, giúp code CSS linh hoạt dễ bảo trì –> Từ đó sẽ bớt khổ đau nhiều hơn khi viết CSS thuần 😀

2. Nội suy (Interpolation) là gì?

Nội suy (#{}) dùng để chèn giá trị biến hoặc biểu thức vào chuỗi. Ví dụ cơ bản:

$size: 100;
.class {
  width: #{$size}px; // Kết quả: width: 100px;
}

Giải thích sơ qua nhé: ban đầu mình tạo ra một biến Sass là $size với giá trị là 100 –> sau đó mình css selector trong đó có thuộc tính width với giá trị là 100 lúc đầu mình đã gán cho biến $size –> Kết quả sẽ là width: 100px; nếu không dùng #{} thì Scss sẽ báo lỗi, vì Sass không thể hiểu $sizepx vì vậy width: #{$size} nội suy #size thành chuỗi rồi nối thêm px
Ví dụ nâng cao khác:

$name: 'primary';
$color: #ff0000;

.button-#{$name} {
  color: $color;
}

Kết quả:

.button-primary {
  color: #ff0000;
}

Kết hợp Toán tử + Nội suy:

$col: 3;

.grid-#{$col}-col {
  width: #{100% / $col}; // Kết quả: width: 33.3333%;
}

Sau đây là cách gọi từng thành phần:

#{1 + 2} –> 3

Thành phần	Ý nghĩa	Ví dụ
`$bien`	Biến	`$padding: 20px;`
`#{}`	Nội suy	`#{1 + 2}` –> `3`
`#{$bien}`	Chèn giá trị của biến vào chuỗi	`.col-#{$number}`

Tip để dễ nhớ:

Cần chèn biến vào tên class, chuỗi, thuộc tính → dùng #{}
Nội suy không chỉ dùng trong giá trị, mà cả trong selector, tên biến, mixin cũng được