sass
Mixins

Sintaxis

• @mixin mixin-name ($argument1, $argument, ...){ ... }

Crea y utiliza un mixin.

Para crear una @mixin usa la directiva @mixin .

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Puede especificar una lista de argumentos dentro de un paréntesis después del nombre de la mezcla. Recuerda comenzar tus variables con $ y separarlas con comas.

Para usar la mezcla en otro selector, use la directiva @include .

footer, header{ @include default-box (#ddd, #ccc); }

Los estilos de la mezcla ahora se usarán en el footer y el header , con el valor #ccc para la variable $color y #ddd para la variable $borderColor .

Mixin con argumento variable.

Hay algunos casos en mixins donde puede haber argumentos simples o múltiples mientras se usa. Tomemos un caso de border-radius de border-radius donde puede haber un solo argumento como border-radius:4px; o múltiples argumentos como border-radius:4px 3px 2px 1px; .

Tradicional con mezcla de argumentos de palabras clave será como a continuación: -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

Y utilizado como

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

El ejemplo anterior es complejo (codificar, leer y mantener) y si no puede pasar solo uno o dos valores, generará un error y, para usar uno, dos o sus valores, debe definir otros tres mixins.

Al utilizar la variable Argumento , no tiene que preocuparse por la cantidad de argumentos que puede pasar. Los argumentos variables se pueden declarar definiendo un nombre de variable seguido de tres puntos (...) . A continuación se muestra un ejemplo de un argumento variable.

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

Y utilizado como

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

El ejemplo anterior es mucho más simple (para codificar, mantener y leer), no debe preocuparse por la cantidad de argumentos que están por venir, ya sea uno o más de uno .

Si hay más de un argumento y, en cualquier caso, desea acceder al segundo argumento, puede hacerlo escribiendo el nombre de propertyname : nth(variable_name, 2) .

Incumplimientos sensuales

SASS le ofrece la posibilidad de omitir cualquier parámetro, excepto los que desea sobrescribir, por supuesto. Tomemos nuevamente el ejemplo de la default-box :

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Aquí llamaremos a la mezcla que ha sobrescrito el segundo parámetro.

footer, header{ @include default-box ($borderColor: #ccc); }

el valor de $borderColor es #ccc , mientras que $color permanece red

Argumentos opcionales

Los argumentos opcionales de SASS le permiten usar un parámetro solo si especifica su valor; De lo contrario, será ignorado. Tomemos un ejemplo de la siguiente mezcla:

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

Así que una llamada a

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

simplemente mostrará lo siguiente en el archivo CSS:

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS no genera propiedades con valor null como su valor, lo cual es muy útil cuando necesitamos incluir un argumento opcional en nuestra llamada o no.

directiva @content

Los mixins pueden pasar un bloque de código compatible con SASS, que luego estará disponible dentro del mixin como la directiva @content .

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

Y esto daría salida:

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

Los mixins pueden usar la directiva @content y seguir aceptando parámetros.

@mixin small-screen($offset) {...