Herencia con @extend en Sass
Contenido del curso
Instalación y configuración del entorno de trabajo
Reglas y uso
Expresiones
Proyecto: sección main
Herencia en SASS
Mixins
Funciones
Proyecto
Deploy
Extras
Herencia con @extend en Sass
Herencia con @extend en Sass
Contenido del curso
Bryan Andres Vera Garcia
Ana María Díaz
Profesor
Benjamin Allen Ramirez Horna
----- ----
Sebastián Caraballo Marzola
Miguel de la Cruz
Any Omaña
Kenneth Angulo L
Juan David Santamaria Gomez
Jean Carlos Rodríguez
Fabio Triana
Inheritance Sass
El concepto de la herencia en Sass, es un concepto bastante sencillo, pero muy poderoso, que si lo sabes aplicar va a acelerar y optimizar tu desarrollo. . Muchas veces al estar creando nuestros estilos podemos caer en la repetición de código, esto conlleva a dos problemas, Primero se comienza a extender bastante la hoja de estilos y se vuelve difícil de mantener a lo largo del tiempo, el otro problema que puede surgir es el desorden, entonces, si queremos arreglar o cambiar alguna parte de nuestro código va a ser más difícil hacerlo. . Por suerte tenemos a nuestro buen amigo SASS, piénsalo así, muchas veces usamos patrones de diseño, responsive es patrones, nos dan ciertas guías o convenciones para saber como organizar CSS, el más usado es BEM. . BEM nos propone crear estilos generales con una clase y luego modificar esa clase según nos convenga, por ejemplo:
<div class="error error--serious"> Oh no! You've been hacked! </div>
En este ejemplo tenemos un div con dos clases “error” y ++“error--serious”++, una buena opción para estilizar este div, suponiendo que los necesitáramos reutilizar más adelante, sería de la siguiente forma: .
.error { border: 1px #f00; background-color: #fdd; } .error--serious { border-width: 3px; }
Pero esto se puede simplificar a un más usando la herencia con SASS
.error { border: 1px #f00; background-color: #fdd; &--serious { @extend .error; border-width: 3px; } }
De esta manera no solo estamos organizando el código y evitando reutilizar código, si no además se puede entender de una mejor forma de donde viene los estilos heredados y a que clase hacen referencia
Gracias por compartir tus conocimientos implementando el patrón de diseño, me parece excelente implementación!!
yo solo veo que se le ha agregado una linea de codigo
Uff ahora si se vienen los @extend uwu
Además del @extend, Sass también proporciona otras características que facilitan la herencia y la reutilización de estilos, como las funciones y mixins. Estos elementos ofrecen formas más flexibles y poderosas de compartir y heredar estilos.
Chicos, mi consejo es que tomen como un reto personal adaptar esta web a otros tamaños de pantalla 🫣
He leído muchos comentarios inconformes porque el curso no lo hacen con Mobile First, pero recuerden que estamos aprendiendo Sass, un framework súper cool hasta lo que he visto
No todo el paso a paso nos lo van a dar siempre, pero si hemos llegado hasta aquí es porque ya somos capaces de mucho. Crean en ustedes, cambien colores, imágenes, letras, hagan de cada curso un reto personal y algo divertido de lo que aprender ✨💗
Saluditos para todos
CUales son los casos de uso practicos para usar eherencia ?
Piensa en elementos que comparten el 90% de su ADN visual pero cambian detalles mínimos, como alertas de notificación o tarjetas de producto. La clase base define la estructura común y @extend clona esos estilos sin duplicar código CSS.
¿Ves algún otro componente en una interfaz típica que encaje en esta lógica de base y variantes?
.
Código en el repositorio de GitHub
platzi/cursos-sass (github.com)
Yo lo que hago es que hago unas clases globales, y luego uso clases con modificador. Claro está que no conocia estas funciones.
<button class="button__primary hero__content--button">Conoce más</button> CSS .button__primary { padding: 1.2rem 1.8rem; min-height: 4.4rem; width: fit-content; background-color: $primary-text-color; color: $primary-color; font-weight: bold; border:none; border-radius: 2rem; } CSS + MOD hero__content--button { margin-inline-start: 0; margin-block-start: 2rem; }