Considerando el ejemplo anterior donde hablamos de botones 3D con SASS:

See the Pen Myavav by Uriel Hernández (urielhdz) on CodePen.

¿Cómo podríamos hacerlo más reusable? Intentemos utilizando Mixins.

Qué son

Un mixin es una "función" en el sentido de que nos permite reutilizar código y que acepta argumenos, sin embargo, no es una función como tal (podemos decir esto porque en SASS también existen las funciones). La característica de los mixins es que definen propiedades que después se incluyen en un selector.

Ejemplo

Un mixin se define con el keyword @mixin seguido del nombre y los posibles parámetros:

@mixin threed_button($color){

}

Y para utilizarlo lo incluímos en algún selector:

a{
  @include threed_button(#eee);
}

Al incluirlo además pasamos el valor de los parámetros que se utilizan en el mixin. En este punto es fácil poder mover nuestro código del botón 3D:

@mixin threed-button($base-color){
  $shadow: "";

  @for $i from 1 through 4{
    $shadow: $shadow + "#{$i}px #{$i}px 0px 2px " + darken($base-color,$i*5) + ",";
  } 

  $shadow : str-slice($shadow,0,str-length($shadow)-1);
  appearance: none;
  border:none;
  background: $base-color;
  box-shadow: unquote($shadow);
}

Ahora apliquemos nuestro mixin:

.threed-btn--pink{
  @include 3d_button(#ff4081);
  font-size:18px;
  color:white;
}

Aquí está funcionando:

See the Pen MyyJrW by Uriel Hernández (@urielhdz) on CodePen.

¿Por qué usar mixins? Este caso es un claro ejemplo de por qué, crear botones para otras combinaciones de colores es mucho más fácil:

.threed-btn--pink{
  @include 3d_button(#ff4081);
  font-size:18px;
  color:white;
}

.threed-btn--red{
  @include 3d_button(red);
  font-size:18px;
  color:white;
}

Y listo, tenemos una función de código que podemos ir reciclando.

Extra: Nota como no coloqué el color de la fuente en el mixin, esto en el caso de que queramos hacer botones claros, el mixin tiene que abstraer únicamente las responsabilidades del mixin (en este caso el botón 3d).

En el siguiente artículo veremos arreglos y ciclo each.