Mixins

Llamamos mixins a bloques de código SASS reutilizable que ejecuta una tarea específica.

@mixin header-title {
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 2em;
  font-family: 'Pacifico', sans-serif;
}
  

@include

Para reutilizar un mixin lo incluimos en nuestra declaración mediante:

.heading h1 {
  @include header-title;
  [...]
}

Mixins con argumentos

La versatilidad de un mixin se ve incrementada con la posibilidad de pasarle un argumento externo que podemos computar dentro de él:

@mixin header-title($color) {
  border-bottom: 1px solid #ccc;
  color: $color;
  font-size: 2em;
  font-family: 'Pacifico', sans-serif;
}

Pasando argumentos a mixins

Podemos usar el mismo mixin en declaraciones diferentes pasando diferentes argumentos cada vez:

.heading h1 {
  @include header-title(#fe0);
}

.post-article h2 {
  @include header-title(#bada55);
}

Mixins con múltiples argumentos

Podemos pasar más de un argumento separándolos por comas:

@mixin header-title ($color, $background) {
  border-bottom: 1px solid #ccc;
  color: $color;
  background: $background;
  font-size: 2em;
  font-family: 'Pacifico', sans-serif;
}

Pasando múltiples argumentos

Debemos de respetar el orden, el número de argumentos y han de estar separados por comas:

.heading h1 {
  @include header-title(#fe0, #bada55);
}

Argumentos por defecto

En ocasiones es conveniente disponer de la posibilidad de no indicar ningún argumento y que nuestro mixin aplique valores por defecto:

@mixin header-title($color: #222222, $background: #fafafa) {
  border-bottom: 1px solid #ccc;
  color: $color;
  background: $background;
  font-size: 2em;
  font-family: 'Pacifico', sans-serif;
}

Sobreescribiendo valores por defecto

Si no pasamos como argumento alguno de los valores el mixin aplica el valor definido por defecto. En caso contrario el valor del argumento prevalece soble el valor por defecto:

.heading h1 {
  @include header-title(#fe0);
  // Background será el valor por defecto #fafafa
}

Downsides

A pesar de que los mixins nos ayudan enormemente a crear bloques de código reutilizables y personalizables, hemos de tener en cuenta que cada llamada a un mixin es una nueva inserción en nuestro CSS final. De modo que si llamamos 10 veces al mismo mixin estaremos repitiendo el mismo bloque de código cada vez.

Operaciones aritméticas

SASS permite realizar operaciones aritméticas que utilizaremos para computar valores de declaraciones directamente como en el siguiente ejemplo:

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Resultado

SASS permite realizar operaciones aritméticas que utilizaremos para computar valores de declaraciones directamente como en el siguiente ejemplo:

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}