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

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

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

Compile ra (selector được gom):

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

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

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.