Directiva @extend
La cuarta característica útil nos permite aplicar propiedades CSS preestablecidas de un elemento a otro, creando una relación entre selectores. Esto significa que un selector puede heredar las propiedades de otro selector.
Ahora, echemos un vistazo a la siguiente imagen, que muestra dos elementos de botón:
Tenemos dos botones: "enviar" y "submit". La única distinción entre estos elementos es el valor de la propiedad background-color. Por lo tanto, podemos definir los estilos para el botón "enviar" y hacer que el botón "enviar" herede esos estilos.
El código html es:
Veamos cómo podemos heredar estilos con la ayuda de sass.
El selector .submit-button hereda todos los estilos del selector .send-button usando la directiva @extend.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Directiva @extend
La cuarta característica útil nos permite aplicar propiedades CSS preestablecidas de un elemento a otro, creando una relación entre selectores. Esto significa que un selector puede heredar las propiedades de otro selector.
Ahora, echemos un vistazo a la siguiente imagen, que muestra dos elementos de botón:
Tenemos dos botones: "enviar" y "submit". La única distinción entre estos elementos es el valor de la propiedad background-color. Por lo tanto, podemos definir los estilos para el botón "enviar" y hacer que el botón "enviar" herede esos estilos.
El código html es:
Veamos cómo podemos heredar estilos con la ayuda de sass.
El selector .submit-button hereda todos los estilos del selector .send-button usando la directiva @extend.
¿Todo estuvo claro?
