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

# Extend & Placeholders

## @extend

`@extend` cho một selector kế thừa toàn bộ style của selector khác. Sass gom các selector dùng chung vào một rule thay vì lặp lại declaration.

```scss
.message {
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 4px;
}

.message-success {
  @extend .message;
  border-color: green;
}
```

Compile ra (selector được gom):

```css
.message, .message-success {
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 4px;
}
.message-success {
  border-color: green;
}
```

## Placeholder selector %

Placeholder (`%name`) là selector chỉ để extend, không tự sinh CSS nếu không được dùng. Tránh tạo class thừa trong output.

```scss
%card-base {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-card {
  @extend %card-base;
  padding: 16px;
}

.user-card {
  @extend %card-base;
  padding: 24px;
}
```

`%card-base` không xuất hiện trong CSS output trừ khi được extend. So với `.class` extend, placeholder sạch hơn vì không để lại class gốc dư thừa.

## @extend vs mixin

Hai cách chia sẻ style nhưng output khác nhau.

|                | @extend / placeholder              | Mixin                         |
| -------------- | ---------------------------------- | ----------------------------- |
| Output         | Gom selector chung một rule        | Copy declaration vào từng nơi |
| Kích thước CSS | Nhỏ hơn nếu nhiều nơi dùng         | Lớn hơn (lặp declaration)     |
| Tham số        | Không                              | Có                            |
| Media query    | Hạn chế (không extend xuyên media) | Linh hoạt với `@content`      |

Quy tắc chọn:

- Style cố định, không tham số, dùng lại nhiều: placeholder + `@extend`.
- Cần tham số hoặc dùng trong media query: mixin.

## Cảnh báo về @extend

`@extend` gom selector có thể tạo chuỗi selector dài và thứ tự CSS khó đoán khi extend nhiều cấp. Trong codebase lớn, nhiều team ưu tiên mixin để output dễ dự đoán hơn, chấp nhận CSS lớn hơn một chút (gzip giảm phần lặp).

Không extend selector nằm trong media query khác scope. Sass sẽ báo lỗi hoặc bỏ qua.

## Tips cho AEM

Dùng placeholder cho các pattern UI lặp lại giữa nhiều AEM component (card, panel, button reset) đặt trong `styles/_placeholders.scss`. Tránh `@extend` một class component cụ thể từ component khác vì tạo coupling style chéo component, khó bảo trì khi author bật/tắt component.