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

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

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

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

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

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

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.