1. SASS là gì?

SASS (Syntactically Awesome Style Sheets) là một CSS Preprocessor - công cụ giúp bạn viết CSS mạnh mẽ hơn, ngắn gọn hơn, dễ quản lý hơn bằng cách bổ sung vào CSS nhiều tính năng như:

  • Biến (variables)
  • Lồng nhau (nested rules)
  • Mixins
  • Vòng lặp (loops)
  • Kế thừa (extend)
  • Tự động ghép code CSS

Sau khi viết bằng SASS hoặc SCSS, mã sẽ được biên dịch thành CSS thuần để trình duyệt chạy.

2. Sự khác nhau giữa SASS và SCSS

SASS có 2 cú pháp:

Cú pháp Đuôi file Dễ hiểu Phổ biến
SCSS .scss ⭐ Rất dễ (giống CSS) Phổ biến nhất
SASS .sass Không có dấu {} hoặc ; Ít dùng

Ví dụ SCSS:

$primary: #3498db;

.button {
  color: $primary;
  padding: 10px;
}

Ví dụ SASS:

$primary: #3498db
.button
  color: $primary
  padding: 10px

Hiện nay 2025, SCSS được dùng 90%+ trong dự án thực tế.

3. Vì sao SASS quan trọng trong 2025?

SASS vẫn là lựa chọn hàng đầu vì:

  • Hỗ trợ biến (trước khi CSS có biến)
  • Tối ưu dự án lớn, đặc biệt UI phức tạp
  • Viết CSS theo module rõ ràng
  • Hỗ trợ vòng lặp, mixin, import rất tiện dụng
  • Từ React, Vue, Angular -> tất cả đều hỗ trợ SCSS tốt

Trong hệ thống design system, SASS luôn giúp giữ cấu trúc CSS chặt chẽ và dễ bảo trì.

4. Ưu điểm của SASS

1. Biến (Variables)

Khai báo biến dễ dàng:

$font-main: "Inter";
$primary: #0d6efd;

2. Lồng nhau (Nested Rules)

Giúp code giống cấu trúc HTML:

.nav {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

3. Mixins (tái sử dụng đoạn CSS)

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Dùng:

.box {
  @include flex-center;
}

4. Kế thừa (Extend)

.message {
  padding: 10px;
}

.error {
  @extend .message;
  color: red;
}

5. Chia nhỏ file (Partial)

Tách thành nhiều file:

_base.scss
_mixins.scss
_variables.scss

Import vào file chính.

5. Cách cài đặt SASS

Có 3 cách phổ biến:

Cách 1: Cài bằng npm

npm install -g sass

Chạy biên dịch:

sass src/style.scss dist/style.css

Cách 2: Sử dụng trong dự án React/Vite

Chỉ cần cài:

npm install sass

-> Sau đó import .scss bình thường.

Cách 3: Webpack, Gulp, Parcel

Tích hợp qua loader:

sass-loader
css-loader
style-loader

6. Ví dụ SCSS chuyển thành CSS

File SCSS:

$primary: #ff5722;

.button {
  color: white;
  background: $primary;
  padding: 12px 20px;

  &:hover {
    background: darken($primary, 10%);
  }
}

Biên dịch thành CSS:

.button {
  color: white;
  background: #ff5722;
  padding: 12px 20px;
}

.button:hover {
  background: #e64a19;
}

7. SASS vs CSS truyền thống (Ai mạnh hơn?)

Tính năng CSS SASS
Biến ✅ (CSS variables ✅ (mạnh hơn)
Lồng nhau ❌ ✅
Mixins ❌ ✅
Vòng lặp ❌ ✅
Tổ chức dự án Trung bình ⭐ Xuất sắc
Code ngắn gọn Bình thường Gọn hơn nhiều

Kết luận: 2025 -> SASS vẫn quan trọng trong các hệ thống lớn.

8. Khi nào nên dùng SASS?

  • Dự án doanh nghiệp, UI phức tạp
  • Làm Design System
  • Làm web thương mại điện tử
  • Muốn tái sử dụng CSS mạnh mẽ
  • Muốn tổ chức CSS theo quy chuẩn BEM + SCSS

9. Kết luận

SASS là công cụ CSS mạnh mẽ, giúp bạn viết CSS ngắn gọn, khoa học và dễ quản lý. Đến năm 2025, SCSS vẫn là lựa chọn hàng đầu của lập trình viên Frontend nhờ khả năng mở rộng, tái sử dụng và tổ chức code hiệu quả.