> 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.

# Partials & Modules

Chia SCSS thành nhiều file nhỏ (partial), gom lại khi compile. Giúp tổ chức code theo chức năng và component.

## Partials

File partial bắt đầu bằng dấu gạch dưới (`_variables.scss`). Sass không compile partial ra file CSS riêng, chúng chỉ được nạp vào file khác.

```
styles/
├── _variables.scss
├── _mixins.scss
├── _base.scss
└── main.scss        # entry, nạp các partial
```

Khi tham chiếu, bỏ dấu gạch dưới và phần mở rộng.

## @use (dart-sass, khuyến nghị)

`@use` nạp một file như một module có namespace. Biến, mixin, function của file đó truy cập qua namespace, tránh xung đột tên toàn cục.

```scss
// main.scss
@use 'variables';
@use 'mixins';

.btn {
  color: variables.$primary;
  @include mixins.flex-center;
}
```

Đổi namespace bằng `as`, hoặc bỏ namespace bằng `as *` (thận trọng vì mất tính cô lập).

```scss
@use 'variables' as v;
@use 'mixins' as *;

.btn {
  color: v.$primary;
  @include flex-center;
}
```

Mỗi file `@use` chỉ nạp một lần dù được tham chiếu nhiều nơi, tránh trùng lặp CSS.

## @forward

`@forward` tái xuất các thành phần của một partial cho file khác dùng, dùng để tạo một entry tổng hợp.

```scss
// styles/_index.scss
@forward 'variables';
@forward 'mixins';
```

```scss
// component.scss
@use 'styles' as *; // có cả variables và mixins
```

## @import (cũ, deprecated)

`@import` của Sass nạp file vào global scope. Vấn đề: mọi biến/mixin thành global, dễ trùng tên và khó biết biến đến từ đâu. dart-sass đã deprecate `@import` và sẽ gỡ trong tương lai.

```scss
// cách cũ, vẫn gặp nhiều trong codebase AEM legacy
@import 'variables';
@import 'mixins';
```

|            | @use        | @import        |
| ---------- | ----------- | -------------- |
| Namespace  | Có (cô lập) | Không (global) |
| Nạp trùng  | Một lần     | Mỗi lần import |
| Trạng thái | Khuyến nghị | Deprecated     |

Lưu ý: `@import` ở đây là của Sass. `@import` của CSS thuần (nạp file CSS qua URL lúc runtime) là khác và vẫn hợp lệ.

## Thực tế trong AEM

Toolchain AEM cũ (node-sass) chỉ hỗ trợ `@import`. Dự án mới hoặc đã nâng lên dart-sass nên chuyển sang `@use`/`@forward`. Khi maintain legacy, giữ nguyên `@import` cho đồng nhất trừ khi migrate cả bộ.

## Cấu trúc gợi ý (kiểu 7-1 rút gọn)

```
styles/
├── abstracts/        # _variables, _mixins, _functions (không sinh CSS)
├── base/             # _reset, _typography
├── components/       # _button, _card (style từng UI)
├── layout/           # _grid, _header, _footer
└── main.scss         # @use tất cả
```

## Tips cho AEM

`main.scss` là entry Webpack compile, output gom vào `clientlib-site`. Đặt `abstracts/` (variables, mixins) nạp đầu tiên để các phần sau dùng được. Mỗi AEM component có thể có file SCSS riêng trong `components/`, đặt tên khớp component để dễ tra cứu.