sass
mixins

Syntaxis

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

Maak en gebruik een mixin

Gebruik de @mixin mixin-richtlijn om een mixin te maken.

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

U kunt een lijst met argumenten binnen een haakje opgeven na de naam van de mixin. Vergeet niet om uw variabelen te beginnen met $ en ze te scheiden met komma's.

Om de mixin in een andere selector te gebruiken, gebruikt u de @include richtlijn.

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

De stijlen van de mixin worden nu gebruikt in de footer en de header , met de waarde #ccc voor de variabele $color en #ddd voor de variabele $borderColor .

Mixin met variabel argument

Er zijn enkele gevallen in mixins waarbij er enkele of meerdere argumenten kunnen zijn tijdens het gebruik. Laten we een geval van border-radius waarbij er één argument kan zijn zoals border-radius:4px; of meerdere argumenten zoals border-radius:4px 3px 2px 1px; .

Traditioneel met het combineren van zoekwoordargumenten is als volgt: -

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

En gebruikt als

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

Het bovenstaande voorbeeld is complex (om te coderen, te lezen en te onderhouden) en als u niet slechts één waarde of twee waarden kunt doorgeven, geeft dit een foutmelding en om één, twee of hun waarden te gebruiken , moet u drie andere mixins definiëren.

Door variabele Argument te gebruiken , hoeft u zich geen zorgen te maken over hoeveel argumenten u kunt doorgeven. Variabele argumenten kunnen worden opgegeven door een variabelenaam te definiëren, gevolgd door drie punten (...) . Hierna volgt een voorbeeld van een variabel argument.

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

En gebruikt als

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

Het bovenstaande voorbeeld is veel eenvoudiger (coderen, onderhouden en lezen), u hoeft zich geen zorgen te maken over hoeveel argumenten er binnenkort komen - is het een of meer dan één .

Als er meer dan één argument is en u wilt in elk geval toegang krijgen tot het tweede argument, kunt u dit doen door propertyname : nth(variable_name, 2) .

Verstandige standaardwaarden

SASS geeft u de mogelijkheid om elke parameter weg te laten, behalve degene die u natuurlijk wilt overschrijven. Laten we het default-box voorbeeldvoorbeeld opnieuw nemen:

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

Hier noemen we nu dat de mixin de tweede parameter heeft overschreven

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

de waarde van $borderColor is #ccc , terwijl $color red blijft

Optionele argumenten

Met de optionele argumenten van SASS kunt u een parameter alleen gebruiken als u de waarde ervan opgeeft; anders wordt het genegeerd. Laten we een voorbeeld nemen van de volgende mixin:

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

Dus een oproep aan

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

zal eenvoudig het volgende uitvoeren in het CSS-bestand:

.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 voert geen eigenschappen uit met null als hun waarde, wat erg handig is als we een optioneel argument in onze call moeten opnemen of niet.

@ inhoudsrichtlijn

Mixins kunnen een blok met SASS-compatibele code worden doorgegeven, die vervolgens binnen de mixin beschikbaar komt als de @content richtlijn.

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

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

En dit zou het volgende opleveren:

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

Mixins kunnen de @content richtlijn gebruiken en nog steeds parameters accepteren.

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