2

El poder del mixin y el extend.

Juntar el mixins con el extend nos ayudara bastante en la reutilización(en sass) y la reducción(en css) de código.
El uso del Extend es muy sencillo es como crear una plantilla de diseño. Como se ve en el ejemplo.

%boton{
    padding: 8px15px;
    height: 30px;
    margin: 25px0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 10px;

}

Con el símbolo % le estamos diciendo a sass que ese bloque de código no lo compile.Si no que lo vamos a reutilizar.
Hasta el momento nuestro bloque de código no tiene colores.Y eso lo podemos implementar de una forma mas dinámica usando los mixins.

@mixin boton($fondo,$letra) {
    @extend %boton;
    background: $fondo;
    color: $letra;
 }

Nuestra plantilla(el extend) lo agregamos en nuestro mixin. Luego nuestro mixin recibirá dos parámetros el fondo y color de la letra.
Y por ultimo simplemente implementamos nuestro mixin

.btnturquesa{
    @include boton(turquoise,black)
}

Así con una sola linea de código implementamos nuestra plantilla(extend) y ponemos los colores de una forma dinámica(mixin).
Te invito que experimentes, que pruebes como TU puedes implementar esta unión en tu código.

Escribe tu comentario
+ 2