Sass đã được trình làng như một công cụ tự biên dịch hoàn toàn dưới local, hình thành nên trục xương sống của những dự án trong xuyên xuất hơn 1 thập kỉ qua. Nó cho phép tổ chức 1 cách hiệu quả, có thể mở rộng và đầy ổn định 1 gói các CSS. Thậm chí đến ngày hôm nay, tôi vẫn cân nhắc rằng Sass thật sự là 1 công cụ đầy mạnh mẽ. Tuy nhiên, khi mà chúng ta đang bước vào năm 2024, không thể phủ nhận rằng CSS đã và đang trải qua sự phát triển cực kì nhanh chóng. Những tính năng mà trước đây là độc tôn của Sass giờ đây hoàn toàn được tích hợp vào trong CSS, bao gồm biến và điểm nhấn gần nhất là: CSS Nesting.

Variables #

Định nghĩa variables đã là 1 điểm mạnh cực lớn riêng biệt của SCSS, cho phép tập trung kiểm soát rất nhiều thuộc tính, 1 tính năng mà đã không có trong CSS trong 1 thời gian dài. Tuy nhiên, hiện nay, variable có thể được định nghĩa trong CSS bằng 1 cách tương tự như ở trong Sass. Một sự khác biệt đáng kể, tuy nhiên, có phải rằng SCSS variables tồn tại độc lập trong bối cảnh tiền xử lý, trong khi CSS variables có thể sử dụng trong trình duyệt và thập chí được viết đè lên 1 cách dynamically bằng Javascript.

CSS Nesting #

Khả năng xác định các quy tắc style của một thành phần trong một thành phần khác giúp đơn giản hóa đáng kể việc viết CSS. Thay vì sử dụng nhiều lần cùng một bột selector cho các phần tử phụ hoặc pseudo-selectors, nesting cho phép nhóm các phần tử này trong selector cha. Kỹ thuật này dẫn đến một cấu trúc mã rõ ràng, phân cấp và do đó hiệu quả hơn.

Với sự hỗ trợ của trình duyệt hơn 84% đối với CSS Nesting và 86% đối với Nesting Selector, kỹ thuật này ngày càng trở nên dễ tiếp cận.

:is() Pseudo-Class #

:is() pseudo-class cách mạng hóa khái niệm selector bằng cách chấp nhận danh sách các selector và tạo kiểu cho tất cả các phần tử khớp với bất kỳ selector nào trong số này. Điều này hỗ trợ rất nhiều cho việc lựa chọn và styling cho các phần tử trong DOM.

Thay vì danh sách selector dài, bạn có thể sử dụng :is() để cải thiện khả năng đọc đồng thời tránh bộ chọn dài.

:has() Pseudo-Class #

:has() pseudo class cung cấp một cách mạnh mẽ để chọn một phần tử dựa trên các phần tử con của nó, tương tự như việc áp dụng các kiểu có điều kiện.

Truy vấn vùng chứa #

Truy vấn vùng chứa được coi là sự đổi mới quan trọng nhất trong thiết kế web kể từ CSS3. Họ mở rộng khái niệm Responsive Design bằng cách cho phép các thành phần điều chỉnh dựa trên kích thước vùng chứa của chúng. Technique này cho phép thiết kế của một phần tử thay đổi linh hoạt tùy theo context, dẫn đến thiết kế linh hoạt và thích ứng hơn.

Nếu tùy chọn vùng chứa có variable --theme: dark, hãy thêm CSS sau.

Xếp tầng layers #

Với xếp tầng layers, chúng ta có thể tránh việc nesting các classes, ID, v.v. để có độ đặc hiệu cao hơn bằng cách chỉ định layer của riêng mình. Bằng cách sử dụng @layer và @imports, chúng ta có thể xây dựng các layer xếp tầng của riêng mình - từ các kiểu có mức độ ưu tiên thấp như đặt lại và mặc định, thông qua các theme, framework và design systems, cho đến các kiểu có mức độ ưu tiên cao nhất như components, utilities và overrides. Các layer xếp chồng cung cấp nhiều quyền kiểm soát hơn.

Tương lai của SASS #

Có nghĩa là Sass đang trở nên lỗi thời? Không. Mixins và các function, chẳng hạn như chuyển đổi pixel thành rem, vẫn là những lợi thế không thể thay thế của Sass. Tuy nhiên, tôi đã quyết định từ bỏ Sass trong hầu hết các dự án của mình. Thay vào đó, tôi sử dụng block codes và packages được xác định trước trong Sublime Editor, điều này đã cải thiện đáng kể quy trình làm việc của tôi.