Los mixins son una de las características más útiles de Sass, ya que nos permiten reutilizar código de manera sencilla y eficiente. Los mixins son bloques de código que se pueden incluir en nuestras hojas de estilo y que pueden recibir argumentos para personalizar su comportamiento.

Para definir un mixin, utilizamos la palabra clave @mixin seguida del nombre del mixin y de los parámetros entre paréntesis. Dentro de las llaves podemos escribir el código que queremos reutilizar. Por ejemplo, podemos crear un mixin para establecer el color de fondo de un elemento:

@mixin background-color($color) {
background-color: $color;
}

Para utilizar este mixin, debemos incluirlo en nuestro código utilizando la palabra clave @include seguida del nombre del mixin y de los argumentos que deseemos pasarle. Por ejemplo:

.mi-elemento {
@include background-color(red);
}

En este caso, el código del mixin se expandirá en el lugar donde lo incluyamos, de manera que el resultado final sería el siguiente:
.mi-elemento {
background-color: red;
}

Además de recibir argumentos, los mixins también pueden tener valores por defecto para algunos de sus parámetros. Esto es muy útil cuando queremos establecer un comportamiento por defecto pero permitir personalizarlo en caso de necesidad. Por ejemplo, podemos crear un mixin para establecer una serie de propiedades de borde a un elemento:

@mixin border($width: 1px, $style: solid, $color: #000) {
border-width: $width;
border-style: $style;
border-color: $color;
}

En este caso, el mixin tiene tres parámetros: width, style y color. Cada uno de ellos tiene un valor por defecto, que se utilizará en caso de no pasarle un argumento al invocar el mixin. Por ejemplo, podemos utilizar el mixin de la siguiente manera: .mi-elemento {
@include border(2px, dashed);
}

En este caso, el elemento tendrá un borde de 2px de ancho, estilo dashed y color #000, ya que no se ha pasado un valor para el color. Si quisiéramos establecer también el color, podríamos hacerlo de la siguiente manera: .mi-elemento {
@include border(2px, dashed, red);
}