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

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:

npx sass input.scss output.css

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

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

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