sass
mixins

Sintassi

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

Crea e usa un mixin

Per creare un mixin usa la direttiva @mixin .

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

È possibile specificare un elenco di argomenti all'interno di una parentesi dopo il nome del mixin. Ricorda di avviare le tue variabili con $ e separarle con virgole.

Per utilizzare il mixin in un altro selettore, utilizzare la direttiva @include .

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

Gli stili del mixin verranno ora utilizzati nel footer e header , con il valore #ccc per la variabile $color e #ddd per la variabile $borderColor .

Mixin con argomento variabile

Ci sono alcuni casi in mixin dove possono esserci argomenti singoli o multipli mentre lo si usa. Prendiamo un caso di border-radius cui può esserci un singolo argomento come border-radius:4px; o più argomenti come border-radius:4px 3px 2px 1px; .

Tradizionale con Argomenti di parole chiave di miscelazione sarà come di seguito: -

@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;
}

E usato come

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

L'esempio sopra è complesso (per codificare, leggere e mantenere) e se non puoi passare solo un valore o due valori, genererà un errore, e per usare uno, due o là i valori devi definire altri tre mixin.

Usando l' argomento variabile non devi preoccuparti di quanti argomenti puoi passare. Gli argomenti variabili possono essere dichiarati definendo un nome di variabile seguito da tre punti (...) . Di seguito è riportato un esempio di argomento variabile.

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

E usato come

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

L'esempio sopra è molto più semplice (per codificare, mantenere e leggere), non devi preoccuparti di quanti argomenti stanno per arrivare - è uno o più di uno .

Se c'è più di un argomento e in ogni caso si desidera accedere al secondo argomento, è possibile farlo scrivendo propertyname : nth(variable_name, 2) .

Impostazioni predefinite sensibili

SASS ti dà la possibilità di omettere qualsiasi parametro tranne quelli che vuoi sovrascrivere, ovviamente. Prendiamo di nuovo l'esempio della 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;
}

Qui chiameremo ora il mixin che ha sovrascritto il secondo parametro

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

il valore di $borderColor è #ccc , mentre $color rimane red

Argomenti opzionali

Gli argomenti facoltativi di SASS consentono di utilizzare un parametro solo se si specifica il suo valore; altrimenti, sarà ignorato. Facciamo un esempio del seguente mixin:

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

Quindi una chiamata a

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

visualizzerà semplicemente quanto segue nel file 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 non emette proprietà con null come valore, il che è molto utile quando è necessario includere un argomento facoltativo nella nostra chiamata o meno.

direttiva @content

I mixin possono essere passati a un blocco di codice compatibile SASS, che diventa quindi disponibile all'interno del mixin come direttiva @content .

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

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

E questo produrrebbe:

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

I mixin possono usare la direttiva @content e accettano ancora i parametri.

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