Cuándo usar @extend
1
Úsalo para compartir una base semántica muy estable entre variantes cercanas.
2
Evita extender selectores de utilidad genéricos en todo el proyecto porque acopla bloques sin querer.
Sass
05
@extend y placeholders (%) sin contaminar el CSS
Aprende a reutilizar reglas con placeholders y @extend, entendiendo cuándo conviene frente a mixins para evitar selectores inesperados.
Código del tema: Arquitectura Sass escalable
📘 Teoría
Placeholders % para base no renderizada
1
Un placeholder no aparece en CSS final hasta que se extiende desde una clase real.
2
Esto ayuda a mantener salida más limpia que declarar clases base solo para heredar estilos.
%base-button + @extend
%btn-base {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .625rem 1rem;
border-radius: 10px;
}
.btn-primary {
@extend %btn-base;
background: #2563eb;
color: #fff;
}
.btn-danger {
@extend %btn-base;
background: #dc2626;
color: #fff;
}