@mixin y @include en sass | Explicado

Syntácticamente impresionante Hojas de estilo (SASS) es popular para facilitar que sus usuarios escriban el código CSS seco (no se repitan) que es limpio, más legible y reutilizable. De esta manera, Sass aumenta la potencialidad del lenguaje CSS básico. Una de esas formas de escribir un código CSS reutilizable usando SASS es a través de la creación de una regla mixin por @mixin e incluyendo esta mezcla usando la regla @include. Para saber más sobre estas reglas, siga el artículo a continuación.

Sass @mixin y @include reglas

La regla de @mixin en Sass le permite crear un código CSS reutilizable. Este código reutilizable consiste en estilos que son redundantes, por lo tanto, estos se agrupan para que se puedan usar en cualquier parte del código donde se requiera. Este pedazo de código se llama mezcla. Con el fin de usar una mezcla en su código, Sass proporciona la regla @include.

Aquí lo guiaremos sobre cómo crear y usar una mezcla.

Cómo definir una mezcla

Con el fin de definir una mezcla, use la directiva @mixin y agrupe sus estilos CSS redundantes y reutilizables juntos.

Sintaxis de la regla @mixin

@Mixin Mixin-Name
El valor de la propiedad;
El valor de la propiedad;

Después de usar la directiva @mixin, debe nombrar esa mezcla en particular y luego escribir propiedades CSS en ese bloque y se creará una mezcla con éxito. Aquí hay un ejemplo de una mezcla.

encabezado @mixin
Color de fondo: verde;
tamaño de fuente: 30px;
Font-Weight: Bold;

Voila, se ha creado una mezcla para un encabezado! Ahora, cada vez que necesita peinar su encabezado, no necesita escribir esas propiedades, una y otra vez, simplemente use la mezcla anterior y está listo para comenzar. Pero cómo usar esta mezcla? Bueno, como se mencionó anteriormente usando la regla @include, se puede usar una mezcla.

Sintaxis de la regla @include

selector
@include mixin-name;

De esta manera, puede incluir una mezcla en su código donde sea necesario. Por ejemplo, incluamos la mezcla de encabezado que creamos anteriormente.

.encabezamiento
@include Header;

Cuando se transpila el archivo SASS, el código anterior dará el siguiente archivo de salida CSS resultante.

.encabezamiento
Color de fondo: verde;
tamaño de fuente: 30px;
Font-Weight: Bold;

Otra ventaja de esta regla @include es que puede incluir múltiples mezclas juntas. Por ejemplo, a continuación hemos incluido tres mixins en otra mezcla.

@mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

De esta manera puedes usar múltiples mezclas juntas.

Hasta ahora hemos aprendido sobre MIXINS sin argumentos de aprobación. En la siguiente sección, veremos cómo puede pasar los argumentos a una mezcla.

Cómo pasar argumentos a una mezcla

Pasar argumentos para mezclar resultan útiles cuando desea agrupar un conjunto similar de propiedades CSS juntas, sin embargo, los valores pasados ​​a esas propiedades pueden diferir. Así es como puedes definir una mezcla pasando una discusión.

@mixin border ($ color, $ ancho)
borde: $ ancho de ancho $ color $;

.envase
@include border (rosa, 2px);

.caja
@include border (púrpura, 3px);

En el fragmento de código anterior, hemos creado una mezcla por el nombre del borde y lo hemos pasado dos argumentos. Al usar esta mezcla mientras diseñamos otros elementos, hemos usado la regla @include, mientras tanto, los valores pasados ​​a la mezcla de borde difieren en cada caso. Aquí los argumentos aprobados se establecen como variables.

Otra cosa que puede hacer con Mixins es que puede asignar valores predeterminados a los argumentos pasados ​​a las mixins.

@mixin border ($ ancho: 2px, $ color: rosa)
borde: $ ancho de ancho $ color $;

Si desea mantener los valores predeterminados, entonces depende de usted, sin embargo, si desea cambiar un valor en particular, entonces así es cómo se realizará.

.envase
@include border ($ ancho: 3px);

El color aplicado al borde del selector será el mismo que se definió en el valor predeterminado.

Conclusión

La regla @mixin en SASS le permite crear un código CSS reutilizable llamado Mixin, en el que puede agrupar propiedades y valores de CSS redundantes que se pueden usar en cualquier lugar de su código cuando sea necesario. Mientras tanto, la regla @include se usa para agregar una mezcla en su código. También puede pasar argumentos a una mezcla cuando desea agrupar un conjunto similar de propiedades CSS juntas con diferentes valores. Esto y mucho más sobre la regla @mixin y @include se ha compilado en este artículo para ti.