La regla Sass @extend se puede usar cuando es necesario que una clase tenga los estilos de otra clase, junto con sus propios estilos específicos. Esta regla le dice a Sass que un selector debe heredar la clase de otro selector.
Sintaxis:
@extend <selector>
Ejemplo:
SASS
.gfg border: 1px green background-color: black font-family: sans-serif &--geeks @extend .gfg border-width: 4px
Producción:
.gfg, .gfg--geeks {
border: 1px green;
background-color: black;
font-family: sans-serif;
}
.gfg--geeks {
border-width: 4px;
}
Los estilos Sass son los elementos que coinciden con el extensor como si también coincidieran con la clase que se está extendiendo, cuando una clase extiende a la otra. Los selectores no se usan solos en las reglas de estilo. Sass sabe extenderse a todas partes donde se usa el selector. Esto garantiza que los elementos tengan el mismo estilo que si coincidieran con el selector extendido.
Ejemplo:
SASS
.gfg:hover border: 1px green background-color: black font-family: sans-serif .gfg--geeks @extend .gfg border-width: 4px
Producción:
.gfg:hover, .gfg--geeks:hover {
border: 1px green;
background-color: black;
font-family: sans-serif;
}
.gfg--geeks {
border-width: 4px;
}
Funcionamiento de la regla: la regla @extend actualiza las reglas de estilo que contienen el selector extendido para que contenga el selector extendido. Al extender los selectores, Sass realiza una unificación inteligente al no generar nunca los selectores como #main#footer que no pueden coincidir con ningún elemento. También garantiza que los selectores complejos se intercalen para que funcionen independientemente del orden en que se aniden los elementos HTML.
La unificación inteligente también se realiza recortando los selectores redundantes tanto como sea posible, mientras se asegura que la especificidad sea mayor o igual que la del extensor. En resumen, maneja inteligentemente combinadores, selectores universales y pseudoclases que contienen selectores.
Ejemplo:
css
.content nav.sidebar @extend .gfg /* This won't be extended, because `p` is incompatible with `nav` */ p.gfg background-color: green color: white /* There is no way to know whether `<div class="guide">` will be inside or outside `<div class="content">`, so Sass generates both to be safe */ .geeks .gfg border: 1px solid black border-radius: 4px /* Sass knows that every element matching "main.content" also matches ".content" and avoids generating unnecessary interleaved selectors */ main.content .gfg font-size: 2px font-family: sans-serif
Producción:
p.gfg {
background-color: green;
color: white;
}
.geeks .gfg, .geeks .content nav.sidebar,
.content .geeks nav.sidebar {
border: 1px solid black;
border-radius: 4px;
}
main.content .gfg, main.content nav.sidebar {
font-size: 2px;
font-family: sans-serif;
}
Se puede acceder directamente a la unificación inteligente de Sass usando las funciones del selector. La función selector.unify() devuelve un selector que coincide con la intersección de dos selectores, mientras que la función selector.extend() funciona como @extend , pero en un solo selector.