Jak napisać i używać Sass Mixin (SCSS)

Sass mixins (znane również jako domieszki) to fragmenty kodu, które mogą zostać wielokrotnie użyte w całym naszym CSS bez konieczności ich przepisywania. Pisanie mixinów jest samo w sobie proste. Wszystko, co musisz zrobić, to użyć słowa kluczowego @mixin, po którym podasz swoją nazwę, nawiasów klamrowych, między którymi znajdą się wszelkie potrzebne deklaracje. Zasadniczo przypomina to pisanie bloku deklaracji CSS, z tą różnicą, że tutaj musimy wstawić @mixin przed deklaracją.

@mixin blue-list {
    li {
       color:blue;
    }
}

Uwaga: dywizy i podkreślenia są uważane za identyczne w nazewnictwie mixinów. Zatem blue-list i blue_list określałyby ten sam mixin.

Żeby wykorzystać nasz mixin, musimy użyć słowa kluczowego @include.

ul {
 @include blue-list;
}

Kiedy SCSS jest kompilowany do CSS, to zmienia się on w następujący sposób:

ul li {
 color: blue;
}

Argumenty

Nauczyliśmy się już kilku przydatnych rzeczy, ale dużo jeszcze przed nami. Do mixinów można przekazywać argumenty. Na przykład, jeśli chcielibyśmy, aby nasz poprzedni mixin przyjmował argument koloru, zamiast ustawiać go na sztywno:

@mixin blue_list($color) {
li {
  color:$color;
 }
}

Zwróć uwagę na $. Oznacza to, że słowo po tym znaku to nazwa zmiennej. Zmienne również mają swój zasięg. Rozważmy, na przykład, następujacy blok kodu:

$color: white; //global
.a-local {
$color: black; // overrides global
color: $color;
$local-color: blue; // available only inside button-local
}
.a-default {
$color: #black !default;//uses global value as it is already defined
color: $color;
}
.a {
color: $color; // uses global because no local defined
color: $local-color; //undefined variable: "$local-color"
}

$local-color jest niezdefiniowane, ponieważ nie jest zmienną globalną, a $color jest zdefiniowane, ponieważ taką zmienną jest. Inną ciekawą funkcją jest słowo kluczowe !default. Pozwala ono użyć wartości zapasowej, jeśli $color jest niezdefiniowane.

Czasami zdarzają się takie sytuacje, w których chcesz zdefiniować wartości zapasowe dla argumentów mixinu. Takie coś nazywane jest wartościami domyślnymi. Można je zdefiniować w następujący sposób:

@mixin blue_list($color: blue) {
 li {
  color:$color;
 }
}

Oznacza to, że jeśli wywołane zostanie @include blue-list (nawet jeśli wartość koloru nie została przekazana) Sass użyje niebieskiego, ponieważ zdefiniowaliśmy wartość domyślną.

Należy również zauważyć, że domyślne argumenty trzeba zdefiniować na końcu listy. Na przykład, poniższy kod to niepoprawna składnia i wyrzuci on błąd:

@mixin blue_list($color: blue $width) {
///Code
 }

W CSS istnieją właściwości, które mogą przyjmować wiele argumentów. Margines można, na przykład, zapisać w dowolnej z tych odmian:

a {
 margin: 10px;
 margin: 10px 20px;
 margin: 10px 20px 50px;
 margin: 10px 20px 50px 20px;
}

Problem pojawia się, gdy mamy mixin dla właściwości margin, jak poniżej:

@mixin margin($values) {
 @each $let in $values {
 margin: #{$let};
 }
}

A co jeśli zamiast przekazać jedną wartość dla marginesu, chcieliśmy przekazać kilka, w taki sposób, w jaki to możliwe w CSS? Wywołanie czegoś takiego jak @include margin(2px 4px 6px); skompilowałby się do:

ul {
 margin: 2px;
 margin: 4px;
 margin: 6px;
}

Jeśli chcemy przekazać wiele wartości, musimy podać Sassowi, że nie jest to lista, tylko jedna zmienna. Robimy to za pomocą 3 kropek:

@mixin margin($values…) {
 //Code in here
}

Przez użycie 3 kropek w naszym argumencie, wywołanie @include margin(2px 4px 6px) kompiluje się do tego:

ul {
 margin: 2px 4px 6px;
}

Skoro jesteśmy już przy 3 kropkach, SCSS obsługuje również operatory rozwinięcia (ang. spread operator). Oznacza to, że zamiast przekazywać każdą właściwość indywidualnie, możemy po prostu przekazać coś, co nazywa się mapą. Na przykład:

$light-theme: (textColor: #333333, backgroundColor: #ffffff, borderColor: #000000);
$dark-theme: (textColor: #cccccc, backgroundColor: #000000, borderColor: #ffffff);
@mixin bodyColors($textColor, $backgroundColor, $borderColor) {
 color: $textColor;
 background-color: $backgroundColor;
 border-color: $borderColor;
}
.button {
 @include bodyColors($light-theme...);
}

Kontrola przepływu

Mamy jeszcze funkcje kontroli przepływu. Zgadza się: SCSS ma operatory if, else, else if oraz each.

Operatory @if, @else if oraz @else są zdefiniowane w następujący sposób:

@if $let == true
{
// Conditional code
@else if $let == true {
// Conditional code
} 
@else {
// Neither were true, so fallback to this
 }
}

@each wywołuje się tak:

@each <variables> in <list or map> {
//code
}

W praktyce @each wygląda tak:

@each $name,$size in (“normal”:5px,”big”:10px,”huge”: 20px) {
.#{$name} { text-size: $size;}
}

I skompiluje się do tego:

.normal {
text-size: 5px;
}
.big {
text-size: 10px;
}
.huge {
text-size: 20px;
}

Podsumowanie

Mixiny to jedna z wielu funkcji Sassa. Więcej dowiesz się z dokumentacji.

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.