sass
Mixins

Syntax

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

Skapa och använda en mixin

För att skapa en mixin använder du @mixin direktivet.

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

Du kan ange en lista med argument inom en parentes efter mixins namn. Kom ihåg att starta dina variabler med $ och separera dem med komma.

Om du vill använda mixin i en annan väljare använder du @include direktivet.

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

Stilarna från mixin kommer nu att användas i footer och header , med värdet #ccc för $color och #ddd för $borderColor variabeln.

Mixin med variabelt argument

Det finns vissa fall i mixins där det kan finnas enstaka eller flera argument när du använder det. Låt oss ta ett fall med border-radius där det kan finnas enskilda argument som border-radius:4px; eller flera argument som border-radius:4px 3px 2px 1px; .

Traditionellt med sökordsargumentblandning kommer att vara som nedan: -

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

Och används som

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

Exemplet ovan är komplicerat (att koda, läsa och underhålla) och om du inte bara kan skicka ett värde eller två värden kommer det att kasta ett fel och för att använda ett, två eller där värden måste du definiera tre andra mixins.

Genom att använda variabla argument behöver du inte oroa dig för hur många argument du kan skicka. Variabla argument kan deklareras genom att definiera ett variabelnamn följt av tre punkter (...) . Följande är ett exempel på ett variabelt argument.

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

Och används som

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

Exemplet ovan är mycket enklare (att koda, underhålla och läsa), du behöver inte oroa dig för hur många argument som kommer att komma - är det ett eller flera än ett .

Om det finns mer än ett argument och om du vill komma åt det andra argumentet kan du göra det genom att skriva propertyname : nth(variable_name, 2) .

Förnuftiga standardvärden

SASS ger dig möjligheten att utelämna alla parametrar utom de som du naturligtvis vill skriva över. Låt oss åter ta default-box exemplet:

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

Här kallar vi nu mixin efter att ha skrivit över den andra parametern

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

värdet på $borderColor är #ccc , medan $color förblir red

Valfritt argument

SASS: s valfria argument låter dig bara använda en parameter om du anger dess värde; annars ignoreras det. Låt oss ta ett exempel på följande mixin:

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

Så ett samtal till

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

kommer helt enkelt att skriva ut följande i CSS-filen:

.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 skickar inte ut egenskaper med null som värde, vilket är till stor hjälp när vi behöver inkludera ett valfritt argument i vårt samtal eller inte.

@ innehållsdirektiv

Mixins kan skickas över ett block med SASS-kompatibel kod, som sedan blir tillgängligt inom mixin som @content direktivet.

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

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

Och detta skulle producera:

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

Mixins kan använda @content direktivet och fortfarande acceptera parametrar.

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