sass
Mixiny

Składnia

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

Utwórz i użyj mixin

Aby utworzyć mixin, użyj dyrektywy @mixin .

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

Możesz podać listę argumentów w nawiasach po nazwie mixinu. Pamiętaj, aby rozpocząć zmienne od $ i oddzielić je przecinkami.

Aby użyć miksu w innym selektorze, użyj dyrektywy @include .

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

Style z mieszanki będą teraz używane w footer i header , z wartością #ccc dla zmiennej $color i #ddd dla zmiennej $borderColor .

Mixin ze zmiennym argumentem

Istnieją pewne przypadki w mixinach, w których może być jeden lub wiele argumentów podczas jego używania. Weźmy przypadek border-radius którym może występować pojedynczy argument, taki jak border-radius:4px; lub wiele argumentów, takich jak border-radius:4px 3px 2px 1px; .

Tradycyjne z mieszaniem argumentów słów kluczowych będzie wyglądać jak poniżej: -

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

I używane jako

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

Powyższy przykład jest złożony (do kodowania, odczytu i utrzymania) i jeśli nie możesz przekazać tylko jednej wartości lub dwóch wartości, wygeneruje błąd, a aby użyć jednej, dwóch lub tam wartości, musisz zdefiniować trzy inne miksy.

Używając zmiennej Argument , nie musisz się martwić, ile argumentów możesz przekazać. Argumenty zmiennych można zadeklarować, definiując nazwę zmiennej, po której następują trzy kropki (...) . Poniżej znajduje się przykład argumentu zmiennego.

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

I używane jako

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

Powyższy przykład jest znacznie prostszy (do kodowania, utrzymywania i czytania), nie musisz się martwić o to, ile argumentów nadejdzie - czy jest to jeden czy więcej .

Jeśli istnieje więcej niż jeden argument, a w każdym razie chcesz uzyskać dostęp do drugiego argumentu, możesz to zrobić, pisząc nazwę propertyname : nth(variable_name, 2) .

Rozsądne wartości domyślne

SASS daje możliwość pominięcia dowolnego parametru oprócz tych, które chcesz oczywiście zastąpić. Weźmy jeszcze raz przykład 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;
}

Tutaj wywołamy teraz mixin, który zastąpił drugi parametr

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

wartość $borderColor #ccc wynosi #ccc , a $color pozostaje red

Opcjonalne argumenty

Opcjonalne argumenty SASS pozwalają użyć parametru tylko wtedy, gdy podasz jego wartość; w przeciwnym razie zostanie zignorowany. Weźmy przykład następującego miksu:

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

Więc wezwanie do

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

po prostu wyświetli następujące dane w pliku 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 nie wyświetla właściwości z null , co jest bardzo pomocne, gdy musimy dołączyć opcjonalny argument do naszego wywołania, czy nie.

Dyrektywa @content

Do mixin można przekazać blok kodu zgodnego z SASS, który następnie staje się dostępny w @content dyrektywa @content .

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

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

I to dałoby wynik:

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

Mixiny mogą korzystać z dyrektywy @content i nadal akceptować parametry.

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