Tạm biệt SASS 👋, chào mừng CSS trở lại

Sass từ lâu đã khẳng định vị thế của mình như một công cụ tiền xử lý mạnh mẽ được cài đặt cục bộ, đóng vai trò nền tảng cho các dự án của tôi trong hơn một thập kỷ. Sass đã giúp tôi tổ chức các gói CSS ổn định và dễ mở rộng một cách hiệu quả. Thậm chí cho đến hiện tại, tôi vẫn coi Sass là một công cụ vô cùng mạnh mẽ.

Tuy nhiên, khi bước vào năm 2024, không thể phủ nhận rằng CSS đã phát triển nhanh chóng. Những tính năng từng là điểm mạnh độc quyền của Sass giờ đây đã được tích hợp sẵn vào CSS, bao gồm cả biến và tính năng nổi bật gần đây nhất: CSS Nesting (Lồng ghép CSS).

Biến (Variables)

css Copy

:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

Việc định nghĩa biến từ lâu đã được xem là thế mạnh độc đáo của SCSS, cho phép quản lý tập trung nhiều thuộc tính – một tính năng mà CSS đã thiếu trong thời gian dài. Tuy nhiên, ngày nay, CSS cũng có thể định nghĩa biến tương tự như Sass.

Một khác biệt đáng chú ý là các biến của Sass chỉ tồn tại trong bối cảnh tiền xử lý, trong khi biến của CSS có thể được sử dụng ngay trong trình duyệt và thậm chí có thể bị ghi đè động qua JavaScript.

CSS Nesting (Lồng ghép CSS)

css Copy

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

  .blog-item {
    border: 1px solid var(--neutral-200);

    & span {
      font-size: 1rem;
    }
  }
}

Khả năng định nghĩa các quy tắc kiểu dáng của một phần tử nằm bên trong một phần tử khác giúp việc viết CSS đơn giản hơn rất nhiều. Thay vì phải lặp đi lặp lại cùng một bộ chọn (selector) cho các phần tử con hoặc giả, CSS Nesting cho phép nhóm các bộ chọn này vào bên trong bộ chọn cha.

Kỹ thuật này không chỉ giúp mã nguồn rõ ràng hơn theo cấu trúc phân cấp mà còn mang lại hiệu quả cao hơn. Hiện nay, hỗ trợ của trình duyệt cho CSS Nesting đạt hơn 84%, và đối với Nesting Selector là 86%.

Pseudo-class :is()

css Copy

:is(selector1, selector2, selector3) {
  /* styles */
}

Pseudo-class :is cách mạng hóa khái niệm bộ chọn bằng cách chấp nhận danh sách các bộ chọn và áp dụng kiểu dáng cho tất cả các phần tử khớp với bất kỳ bộ chọn nào trong danh sách.

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

Pseudo-class :has()

css Copy

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

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

Container Queries

css Copy

.component {
  --theme: dark;
  container-name: fancy;
}

@container fancy style(--theme: dark) {
  .fancy {
    /* dark styles. */
  }
}

.parent-container {
  container-type: inline-size;

  .headline {
    font-size: 2rem;
  }

  @container (width >= 720px) {
    .headline {
      font-size: 2.5rem;
    }
  }
}

Container Queries được xem là đổi mới quan trọng nhất trong thiết kế web kể từ CSS3. Chúng mở rộng khái niệm Responsive Design bằng cách cho phép các phần tử điều chỉnh dựa trên kích thước của container.

Công nghệ này cho phép thiết kế các phần tử thay đổi linh hoạt tùy thuộc vào ngữ cảnh, mang lại sự thích nghi cao hơn cho thiết kế.

Cascade Layers

css Copy

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

Với Cascade Layers, chúng ta có thể tránh việc lồng ghép các lớp (class), ID, v.v. để tăng độ ưu tiên bằng cách tạo các lớp cascade riêng.

Sử dụng @layer và @import theo lớp, bạn có thể xây dựng các lớp cascade của riêng mình – từ các kiểu ưu tiên thấp như reset và mặc định, qua các theme, framework, đến các kiểu ưu tiên cao như component, tiện ích, và overrides.

Tương lai của Sass

Điều này có nghĩa Sass đã trở nên lỗi thời? Không hề. Các mixin và hàm như chuyển đổi pixel sang 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. Thay vào đó, tôi sử dụng các khối mã và gói được định nghĩa sẵn trong Sublime Editor, điều này đã cải thiện đáng kể quy trình làm việc của tôi.