Organiza tu código con Mixins en Sass

En sass, los mixins son bloques de código que pueden ser reutilizados en otros lugares del proyecto de una página web para generar sus estilos, sin tener que reescribirlos cada vez que sea necesario emplear esos mismos estilos CSS en bloque.

De esta manera, los mixins reducen la repetición de información en la hoja de estilo, simplificando la forma de escritura y organización de tu trabajo de desarrollo.

Si estás a cargo de grandes proyectos que necesitan aprovechar un mismo estilo, estos hacks en el código te pueden ayudar.

¿Cómo usar los mixins?

Para crear un mixin debes usar la sintaxis @mixin seguido del nombre que quieres asignar a este conjunto de código. Es una buena práctica emplear nombres descriptivos y claros.

Al implementarlos, se emplea la sintaxis @include en el elemento o en la parte del código que quieres reutilizar el estilo definido en el mixin.

Si por ejemplo tienes 3 botones en tu página web que utilizan los mismos colores de fondo, tamaño y color del tipo de fuente y bordes redondeados, vas a crear un mixin que usa las variables background-color, color, font-size, border-radius y border para crearlos en bloque:

@mixin boton() {
	background-color: grey;
	color: white;
	font-size: 16px;
	border-radius: 5px;
	border: none;
}

Para aplicar este mixin en los elementos específicos (para este ejemplo, considera 3 botones de clase “boton”) que deben tener su propia función característica, harías lo siguiente:

.boton {
	@include boton;
}

De esta manera, la clase ‘boton’ va a utilizar los valores predefinidos dentro del mixin ‘boton’ y los 3 botones se verían así:

Argumentos y parámetros en un mixin Sass

Los mixins también pueden recibir argumentos cuando es necesario personalizar el estilo generado. A estos también se les conoce como parámetros de un mixin

Considerando el ejemplo anterior, si tuviéramos 3 botones que tiene las mismas características, pero un background distinto, podríamos pasar ‘background’ como parámetro de este mixin:

@mixin boton($background) {
	background-color: $background;
	color: white;
	border-radius: 5px;
	font-size: 16px;
	border: none;
}

Para importarlo en un elemento, debes pasar como argumento de tu mixin el valor (ej. boton-1 y boton-2) o una variable predefinida en la hoja de estilos (ej. boton-3).

Para este ejemplo, considera la variable pré-definida $primary-color:blue.

.boton-1 {
	@include boton(grey);
}

.botton-2 {
	@include boton(red);
}

.botton-3 {
	@include boton($primary-color);
}

Así se vería los 3 botones:

Puedes añadir cuantos parámetros quieras para que tu mixin sea más versátil y se ajuste a la necesidad de tu código.

Sin embargo, ten en cuenta que pasar demasiados parámetros puede hacer el código más difícil de entender y mantener - ¡y eso va en contra de la idea de utilizar Sass!

Mixins condicionales

Otra manera de crear estilos más eficientes y flexibles es utilizar condiciones de uso de un mixin. Si tenemos dos elementos que deben tener el mismo estilo en general, pero hay una condición que solo uno de ellos cumple, podríamos utilizar mixins condicionales.

Su sintaxe @if y debe ser escrita dentro de tu mixin definindo la condición de uso. Si tienes más condiciones a probar, debes usar @else if <condición> o @else.

Un ejemplo es cuando tienes los mismos botones de antes, pero ya tienes variables predefinidas de colores (por ejemplo primary, secondary y tertiary), luego puedes pasar las variables y no un valor específico (”blue”, “gray”, “white”):

@mixin button-style($type) {
  @if $type == "primary" {
    background-color: blue;
    color: white;
  } @else if $type == "secondary" {
    background-color: gray;
    color: black;
  } @else {
    background-color: white;
    color: black;
  }
}

.boton-1 {
  @include button-style("primary");
}

.boton-2 {
  @include button-style("secondary");
}

.boton-3 {
  @include button-style("tertiary");
}

De este código tendríamos el siguiente resultado:

Mixins globales

Los Mixins globales son aquellos que se pueden usar en cualquier archivo Sass, sin necesidad de importarlos en cada uno. Es parecido a como funcionan los escopos locales y global de JavaScript.

Estos son funciones especialmente útiles para definir mixins comunes a varios archivos, es decir, estilos que se repiten con frecuencia.

De esta manera, no será necesario importar los mixins en cada archivo individualmente, lo que te va a ayudar a ahorrar tiempo y evitar errores de importación.

Para definir un mixin global, debes definirlo en un archivo separado de Sass, fuera de cualquier regla o selector, e importarlo en el archivo principal de Sass, que es el encargado de compilar todos los estilos.

👉 Como se trata de un código global, es recomendable limitar el uso de mixins globales para no causar conflictos con otros mixins o estilos de tu proyecto.

¿Mixins te recuerdan a POO?

Si te has dado cuenta, los mixins comparten similitudes con una clase de un lenguaje de programación orientada a objetos (POO) cuando se trata de compartir y reutilizar código.

Definir propiedades y comportamientos que pueden ser implementados por otros elementos.

En este caso, las propiedades y comportamientos son las declaraciones CSS que podemos reutilizar para dar estilo a varios elementos de diferentes partes o componentes de un archivo o proyecto.

Amplía tus conocimientos sobre Sass

Los mixins pueden ser tan flexibles cuanto quieras con el estilo que manejes de un proyecto.

No obstante, ten en cuenta que, aunque pueden ser muy útiles, no debes utilizar los mixins para todo. Si tienes un estilo que solo se emplea una vez en el proyecto, es más eficiente escribir su estilo directamente en el código CSS. Como todo, se necesita pensamiento crítico 😉.

Para crear e implementar mixins en distintas partes de tu código, ya tienes una base, ahora puedes tomar clases en el Curso de Fundamentos de Sass: Crea tu Primera Landing Page donde descubrirás cómo emplear mixins y demás directivas de Sass, aplicando en un proyecto de landing page.