Scss, Mixin
¿Qué es un Mixin?
Además de las variables y el anidamiento, Sass tiene múltiples funciones que reducen la repetición.
El propósito principal de un Mixin es hacer un conjunto de propiedades reutilizables.
Crear un Mixin es muy simple, todo lo que tenemos que hacer es usar el comando @mixin seguido de un espacio y el nombre de nuestro Mixin, luego abrimos y cerramos nuestras llaves. Algo como esto:
@mixin flex {
// write the css here
display: flex;
background: white;
}Ahora podemos usar esta declaración en cualquier lugar de nuestro código.
Los Mixins se incluyen en las hojas de estilos mediante la directiva @include seguida del nombre del Mixin y opcionalmente por una lista de argumentos.
El resultado es que todos los estilos definidos por el Mixin se incluyen en el mismo punto en el que se llama. Por ejemplo:
.container {
@include flex;
padding: 4px;
margin-top: 10px;
}Después de compilar este código SCSS nuestro archivo CSS debería tener este aspecto.
.container {
display: flex;
background: white;
padding: 4px;
margin-top: 10px;
}Pasando argumentos en un Mixin
Los Mixins también pueden tomar argumentos para hacer que sea más dinámico.
Por ejemplo, supongamos que estamos construyendo un sistema de grid y podemos elegir si usar Flexbox para nuestro diseño o floats.
Podemos crear un Mixin y pasar un argumento para decirle que alterne entre flex o float.
Para pasarle argumentos, simplemente hacemos esto:
@mixin grid($flex) {
@if $flex {
@include flex;
} @else {
display: block;
}
}Ahora, cuando llamamos al Mixin grid, debemos pasar un argumento verdadero.
@include grid(true);Para permitir que un Mixin reciba múltiples argumentos tenemos que separarlos con comas.
@mixin grid($flex, $full-width) {
// code goes in here
}Esta es una de las ventajas que nos da Scss para la reutilización de código, recuerda que este preprocesador tiene muchísimas más ventajas.
Aprende más sobre Sass y la mejor forma de iniciarte en HTML y CSS visitando la página de MUKTEK
