Extensión de Estilos con la Directiva @extend
La cuarta característica útil nos permite aplicar propiedades CSS predefinidas de un elemento a otro, creando una relación entre selectores. Esto significa que un selector puede heredar las propiedades de otro selector.
Ahora, observemos la imagen a continuación, que muestra dos elementos de botón:
Tenemos dos botones: "send" y "submit". La única diferencia entre estos elementos es el valor de la propiedad background-color. Por lo tanto, podemos definir los estilos para el botón "send" y hacer que el botón "submit" herede esos estilos.
El código html es:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Veamos cómo podemos heredar estilos con la ayuda de sass.
.send-button {
padding: 10px 20px;
border: 2px solid #4f5e77;
border-radius: 10px;
color: white;
background-color: #ff8a00;
}
.submit-button {
@extend .send-button;
background-color: #9bbaee;
}
El selector .submit-button hereda todos los estilos del selector .send-button utilizando la directiva @extend.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain how the @extend directive works in more detail?
Are there any limitations or drawbacks to using @extend in Sass?
Can you show an example of how to override other properties besides background-color?
Awesome!
Completion rate improved to 2.04Extensión de Estilos con la Directiva @extend
Desliza para mostrar el menú
La cuarta característica útil nos permite aplicar propiedades CSS predefinidas de un elemento a otro, creando una relación entre selectores. Esto significa que un selector puede heredar las propiedades de otro selector.
Ahora, observemos la imagen a continuación, que muestra dos elementos de botón:
Tenemos dos botones: "send" y "submit". La única diferencia entre estos elementos es el valor de la propiedad background-color. Por lo tanto, podemos definir los estilos para el botón "send" y hacer que el botón "submit" herede esos estilos.
El código html es:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Veamos cómo podemos heredar estilos con la ayuda de sass.
.send-button {
padding: 10px 20px;
border: 2px solid #4f5e77;
border-radius: 10px;
color: white;
background-color: #ff8a00;
}
.submit-button {
@extend .send-button;
background-color: #9bbaee;
}
El selector .submit-button hereda todos los estilos del selector .send-button utilizando la directiva @extend.
¡Gracias por tus comentarios!
