Domieszki i moduły

Domieszki w SASS (Mixins) to bloki z wyglądu pełniące rolę funkcji, które mogą być używane w różnych miejscach przekazując do nich argumenty. Są przydatne gdy chcemy w wielu miejscach wykorzystać ten sam zestaw styli.

Domieszki definiujemy przy pomocy słowa kluczowego @mixin na początku, następnie nazwa i parametry. W miejscu gdzie chcemy użyć domieszki używamy słowa kluczowego @include następnie jej nazwa i argumenty.

Moduły w CSS to osobne pliki, które są ładowane przy pomocy słowa kluczowego @use a następnie nazwy domieszki, funkcji lub zmiennej z innego pliku do zaimportowania. Niektóre transpilatory nie wspierają modułów a jedynie domieszki lub ładowanie całych plików przy pomocy @import i nazwy pliku.

Przykład

// SASS
@mixin button($bg, $color) {
  background: $bg;
  color: $color;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-primary { 
    @include button(#3f3aaf, #fff); 
}

.btn-secondary { 
    @include button(#e600ac, #fff); 
}

.btn-tertiary { 
    @include button(#ffffb3, #000); 
}

Po transpilacji poskutkuje arkuszem CSS:

/* CSS */
.btn-primary {
  background: #3f3aaf;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-secondary {
  background: #e600ac;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-tertiary {
  background: #ffffb3;
  color: #000;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

Ćwiczenia

Ćwiczenie 1 - Przygotuj domieszkę, która posłuży do szybkiego zdefiniowania 5 prostokątów o różnych kolorach tła i kolorach fontu. Każdy prostokąt powinna mieć font o rozmiarze 1rem, zaokrąglenie 20%, minimalną wysokość 300px i szerokość 100%.