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.