> For AI agents: the complete documentation index is available at https://nhanbe.id.vn/llms.txt, the full documentation bundle is available at https://nhanbe.id.vn/llms-full.txt.

# SCSS Introduction

SCSS là cú pháp của Sass, một CSS preprocessor. Viết SCSS rồi compile ra CSS thường. SCSS thêm biến, nesting, mixin, function, module mà CSS thuần không có hoặc có hạn chế. Trong AEM, SCSS được compile bằng Webpack trong module `ui.frontend`, output gom vào clientlib.

## SCSS vs Sass syntax

Sass có hai cú pháp:

- SCSS (.scss): superset của CSS, dùng dấu ngoặc nhọn và chấm phẩy. CSS hợp lệ cũng là SCSS hợp lệ. Đây là cú pháp phổ biến, dùng trong note này.
- Sass (.sass): cú pháp thụt lề, không ngoặc, không chấm phẩy. Ít dùng.

```scss
// SCSS
.btn {
  color: white;
  background: blue;
}
```

## Vì sao dùng SCSS trong AEM

- Tổ chức style theo component, dễ bảo trì với codebase lớn.
- Biến và mixin cho design system (màu, spacing, breakpoint dùng lại).
- Nesting khớp với cấu trúc BEM của AEM component.

## Compile trong ui.frontend

AEM project (Maven archetype) có module `ui.frontend` dùng Webpack. Pipeline SCSS điển hình:

```
.scss --> sass-loader (dart-sass) --> css-loader --> MiniCssExtractPlugin --> .css
```

File CSS output được copy vào clientlib (`ui.apps/.../clientlibs/clientlib-site`), AEM load qua `customheaderlibs.html`.

```
ui.frontend/
├── src/main/webpack/
│   ├── components/        # .vue + style
│   ├── site/
│   │   ├── main.scss      # entry SCSS
│   │   └── styles/        # partials
│   └── ...
├── webpack.common.js
└── clientlib.config.js    # cấu hình copy build vào clientlib
```

## Compiler: dart-sass

`node-sass` (LibSass) đã deprecated. Dùng `sass` (dart-sass) là chuẩn hiện tại. Khác biệt ảnh hưởng tới note Partials: dart-sass khuyến nghị `@use` thay cho `@import`.

```bash
npm install -D sass sass-loader
```

## Biên dịch nhanh ngoài AEM

Để thử nhanh khi học, compile trực tiếp bằng CLI:

```bash
npx sass input.scss output.css

# watch
npx sass --watch input.scss:output.css
```

## Tóm tắt tính năng

| Tính năng            | Mục đích                             |
| -------------------- | ------------------------------------ |
| Variables            | Lưu giá trị dùng lại (màu, spacing)  |
| Nesting              | Lồng selector theo cấu trúc DOM      |
| Mixins               | Khối style tái sử dụng, nhận tham số |
| Functions            | Trả về giá trị tính toán             |
| Extend / placeholder | Chia sẻ rule giữa selector           |
| Partials + @use      | Tách file, tổ chức module            |
| Control flow         | `@if`, `@each`, `@for` sinh CSS động |

Các phần tiếp theo đi vào từng tính năng.