Uso de Herencia en SAS para Estilos Reutilizables

Clase 10 de 20 • Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Bryan Andres Vera Garcia

student•

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: .

Estilizamos la clase general con los estilos básicos que se repetirán a lo largo de los div
Luego estilizamos el div en específico que tendrá otros estilos adicionales

.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

Ana María Díaz

teacher•

Gracias por compartir tus conocimientos implementando el patrón de diseño, me parece excelente implementación!!

Benjamin Allen Ramirez Horna

student•

yo solo veo que se le ha agregado una linea de codigo

Alejandro Ramos

student•

Uff ahora si se vienen los @extend uwu

Sebastián Caraballo Marzola

student•

![](

Miguel de la Cruz

student•

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.

Any Omaña

student•

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

Juan David Santamaria Gomez

student•

Jean Carlos Rodríguez

student•

Código en el repositorio de GitHub

platzi/cursos-sass (github.com)

Fabio Triana

student•

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;
        }