Mixiny w SASS

Ten artykuł wyjaśnia mixiny w SASS.

Wyjaśnimy mixiny w SASS za pomocą praktycznych przykładów.

YouTube Video

Mixiny w SASS

Przegląd – Czym jest mixin?

Mixiny to mechanizm, który pozwala definiować często używane zestawy właściwości stylów jako funkcje wielokrotnego użytku, które można wywołać tam, gdzie są potrzebne. Są bardzo przydatne do utrzymania zasad DRY (Nie Powtarzaj Się) w klasach CSS i wielu właściwościach.

Przykład: Najprostszy mixin

Poniżej znajduje się prosty przykład mixina, który łączy ponowne użycie border-radius i box-shadow. Wywołując ten mixin, możesz nadać ten sam wygląd wielu elementom.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• Dzięki temu mixinowi nie musisz powtarzać stylów bezpośrednio.
• Wywołanie wymaga tylko jednej linii: @include card-style;.

Mixiny z argumentami (parametrami)

Mixiny mogą przyjmować argumenty, podobnie jak funkcje. Dzięki temu można zmieniać wygląd, korzystając z tej samej logiki. Poniżej przykład, gdzie kolor jest przekazywany jako argument.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• Udostępniając wartość domyślną, możesz kontrolować zachowanie, gdy argument zostanie pominięty.
• W tym przykładzie używany jest domyślny promień, a jedynie kolor tła jest zastępowany.

Przypadki użycia wielokrotnych argumentów (variadic, ...)

Gdy chcesz przekazać wiele wartości, możesz użyć wielokrotnych argumentów ($args...). To przydatne do generowania klas użytkowych lub przekazywania list zapasowych (fallback).

Jest to pomocne, gdy trzeba przekazać wiele rodzin czcionek lub wartości cienia.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• Przy wywołaniu można przekazać wiele wartości cienia oddzielonych przecinkami.
• W ten sposób możesz użyć tego samego mixina zarówno do prostych, jak i złożonych cieni.

Mixiny z @content — przyjmowanie bloku

Dzięki @content mixin może otrzymać blok stylów od wywołującego. Pozwala to mixinowi zapewnić wspólną otoczkę (wrapper), a wywołujący określa szczegóły zawartości.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• Po stronie wywołującej możesz dodać blok do @include, aby wstawić style wewnątrz.
• Ten wzorzec jest użyteczny dla wrapperów układu, takich jak siatki (grids), karty oraz formularze.

Zaawansowane mixiny z warunkami i pętlami

Struktury sterujące, takie jak @if i @for, mogą być używane wewnątrz mixinów. Możesz użyć ich do automatyzacji generowania klas użytkowych i grupowania ustawień responsywnych.

Poniżej znajduje się przykład automatycznego generowania szerokości klas użytkowych.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

• Poprzez przekazanie mapy ułamków, które chcesz wygenerować po stronie wywołującej, możesz automatycznie wygenerować odpowiadające im klasy narzędziowe jednocześnie.
• Zastosowanie tego podejścia ma tę zaletę, że ogranicza ręczne definiowanie stylów przy zachowaniu spójności projektu.

Mixiny vs Placeholdery (%placeholder)

Podczas gdy mixiny bezpośrednio wstawiają zestaw właściwości, symbole zastępcze (placeholders) są używane z @extend podczas dziedziczenia stylów. W niektórych przypadkach mixiny mogą generować zduplikowany CSS, ale @extend może w pewnych sytuacjach tworzyć bardziej zwarty kod CSS.

Rozumiejąc cele i różnice w CSS generowanym przez każdą z metod, będziesz w stanie wybrać najbardziej optymalne podejście.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• Gdy używasz @extend z symbolem zastępczym, wiele selektorów może zostać połączonych w jedną regułę, co skutkuje bardziej zwartym kodem CSS.
• Z drugiej strony, ponieważ mixiny wstawiają właściwości dokładnie tam, gdzie są potrzebne, oferują elastyczność i pomagają unikać niezamierzonego łączenia selektorów.

Typowe wzorce praktyczne (responsywność, prefiksy dostawców itd.)

W praktyce warto umieszczać typowe operacje, takie jak prefiksy przeglądarek i funkcje responsywne, w mixinach. Poniżej znajduje się przykład łączący właściwości transformacji i prefiksów. Możesz scentralizować kod zapewniający kompatybilność z przeglądarkami, co ułatwia utrzymanie.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• Użycie jest proste i możesz korzystać z tego wszędzie, np. @include transform(rotate(10deg));.
• Nawet jeśli prefixy okażą się niepotrzebne w przyszłości, utrzymanie kodu będzie prostsze, bo aktualizacja mixinu wprowadzi zmiany we wszystkich miejscach w kodzie.

Przykład praktyczny: karty i przyciski razem

Poniżej znajduje się przykład, w którym style przycisków używanych w karcie są ujednolicone za pomocą mixinu, co pozwala na ich przełączanie w zależności od koloru motywu.

To porządkuje często używany wzorzec „karta + przycisk” z użyciem mixinów.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• Korzystając z tych mixinów, możesz pisać komponenty w zwięzły sposób.

Zwracaj uwagę na wydajność i generowany kod CSS

Ponieważ mixiny wstawiają właściwości za każdym razem, gdy są wywoływane, nadmierne używanie @include dla tej samej reguły może powiększyć finalny plik CSS. Możesz zoptymalizować kod, łącząc mixiny z placeholderami i projektowaniem komponentów w razie potrzeby.

Ponadto, następujące działania są również skuteczne.

• Style używane często powinny być zamienione na klasy w celu ich ponownego wykorzystania.
• Typowe wzorce powinny być grupowane za pomocą @content.
• Tworzenie złożonych narzędzi powinno być wykonywane wyłącznie podczas kompilacji.

Wskazówki ułatwiające debugowanie

Korzystając z mixinów, ważne jest również opracowanie metod zwiększających możliwości debugowania i utrzymania. Używanie przejrzystych nazw zmiennych i dodawanie komentarzy wewnątrz mixinów ułatwi późniejsze przeglądanie kodu. Również, jeśli funkcjonalność staje się złożona, podzielenie mixinu na mniejsze jednostki ułatwi testowanie i poprawi możliwości utrzymania.

Ponadto, włączenie source maps pozwala łatwo śledzić, który mixin wygenerował dany CSS, co ułatwia izolowanie problemów.

Poniżej znajduje się przykład przejrzystego mixinu z komentarzami dokumentacyjnymi.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• Posiadanie uporządkowanych komentarzy dokumentacyjnych w taki sposób ułatwia dzielenie się i zrozumienie w zespole.
• Ponieważ komentarze dokumentacyjne SASS mogą być automatycznie wyodrębniane za pomocą kompatybilnych narzędzi, są one również przydatne do generowania dokumentów takich jak przewodniki po stylach.

Podsumowanie

Ponieważ mixiny pozwalają grupować często używane style do ponownego wykorzystania, pomagają zmniejszyć powielanie kodu i zwiększyć łatwość utrzymania. Gdy wiele selektorów korzysta z tych samych reguł, rozważ użycie nie tylko mixinów, ale także @extend (placeholderów). Co więcej, chociaż @content umożliwia elastyczne rozdzielanie wrapperów i zawartości, nadmierne używanie @include może prowadzić do rozwodnionego, obszernego kodu CSS, więc zalecana jest ostrożność. Ważne jest, aby w pełni wykorzystywać argumenty, wartości domyślne i argumenty wielokrotne podczas projektowania mixinów, aby były one uniwersalne i łatwe do rozbudowy.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video