CSS Custom Function (@function): Bước Ngoặt Mới Cho Logic Trong CSS

Trong quá trình phát triển web, chúng ta đã quá quen thuộc với các hàm dựng sẵn (built-in functions) như calc(), min(), max() hay clamp(). Tuy nhiên, sự ra đời của CSS Custom Function thông qua at-rule @function đã đánh dấu một bước tiến lớn, mang lại khả năng tái sử dụng logic mạnh mẽ mà trước đây chỉ có ở các CSS Preprocessor như Sass hay Less.

1. CSS Custom Function là gì?

CSS Custom Function là một tính năng mới cho phép các nhà phát triển tự định nghĩa các hàm tính toán riêng ngay trong mã CSS thuần. Thay vì phải lặp lại các công thức phức tạp hoặc phụ thuộc vào JavaScript, bạn có thể đóng gói logic vào một hàm có tên riêng.

Những khả năng cốt lõi bao gồm:

Định nghĩa hàm có tên: Tạo ra các định danh riêng (bắt đầu bằng dấu gạch ngang kép --).
Nhận tham số (Parameters): Truyền dữ liệu đầu vào linh hoạt để xử lý cho từng trường hợp cụ thể.
Trả về giá trị: Sử dụng thuộc tính result để trả kết quả trực tiếp cho các thuộc tính CSS.

2. Cấu trúc cú pháp cơ bản

Cú pháp của @function được thiết kế rất tường minh và dễ học. Bạn chỉ cần khai báo hàm và sử dụng thuộc tính result để chỉ định giá trị trả về cuối cùng.


@function --ten-ham(--tham-so-1, --tham-so-2) {
  result: /* Biểu thức tính toán */;
}

Sau khi đã định nghĩa xong, bạn có thể gọi hàm này ở bất kỳ thuộc tính CSS nào, tương tự như cách bạn sử dụng hàm var() hay calc().

3. Ví dụ thực tế: Tối ưu hóa tính toán với @function

Hãy xem xét một ví dụ thực tế: Bạn muốn tự động nhân đôi một giá trị bất kỳ để làm padding hoặc margin đồng nhất.

Cách định nghĩa hàm:


/* Định nghĩa hàm nhân đôi giá trị */
@function --double(--value) {
  result: calc(var(--value) * 2);
}

Cách sử dụng trong CSS:


.box {
  /* Kết quả padding thực tế sẽ tự động tính là 32px */
  padding: --double(16px);
}

Phân tích logic: Ở ví dụ trên, hàm --double() tiếp nhận tham số đầu vào là 16px. Bên trong thân hàm, nó thực hiện phép tính thông qua calc() và trả kết quả về cho thuộc tính padding của class .box.

4. Tại sao nên sử dụng CSS Custom Function?

Việc tích hợp logic trực tiếp vào CSS mang lại những lợi ích vượt trội cho quy trình phát triển Frontend hiện đại:

Loại bỏ sự phụ thuộc vào JavaScript: Bạn có thể xử lý các phép toán giao diện phức tạp mà không cần đến script, giúp giảm tải cho trình duyệt.
Mã nguồn sạch và dễ bảo trì: Thay vì phải tìm và thay đổi hàng chục nơi, bạn chỉ cần cập nhật logic tại một khối @function duy nhất.
Hiệu suất tối ưu: Các hàm này được xử lý bởi CSS Engine của trình duyệt, giúp tốc độ phản hồi giao diện nhanh hơn đáng kể.

Lưu ý quan trọng: Hiện tại tính năng này đang nằm trong các bản thảo đề xuất mới nhất của CSS. Bạn nên kiểm tra kỹ tính tương thích của trình duyệt (Browser Support) trước khi triển khai vào các dự án Production.