Miksiny i dołączanie
Twórz wielokrotnie używane bloki stylów za pomocą @mixin i dołączaj je w dowolnym miejscu przy użyciu @include.
Miksiny i dołączanie to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest mixin?
Mixin w Sass to wielokrotnie używany blok deklaracji CSS. W przeciwieństwie do zwykłej klasy może przyjmować parametry, dzięki czemu jest bardziej elastyczny niż kopiowanie i wklejanie kodu. Definiuje się go za pomocą @mixin, a używa za pomocą @include.
Podstawowy mixin
Mixin bez parametrów to po prostu wielokrotnie używany blok:
<div class="hero">Centered hero content</div>
Mixin z argumentami
Przekazuj wartości do mixina, aby dostosować generowany wynik:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
Argumenty domyślne
Ustaw wartości domyślne argumentów mixina, aby były opcjonalne:
<div class="card">Card with default shadow</div>
<div class="modal">Modal with custom shadow</div>
Argumenty nazwane
Przekazuj argumenty mixina po nazwie, aby zwiększyć czytelność:
<div class="tooltip">Tooltip</div>
@content — mixin z blokiem
Mixiny mogą przyjmować blok treści za pomocą @content. Dołączony blok jest wstawiany w miejscu wystąpienia @content:
<a href="#" class="link">Hover or focus this link</a>
<a href="#" class="link-demo">Same link, hover state shown statically</a>
Mixin responsywny
Typowy mixin na potrzeby zapytań media:
<div class="sidebar">Sidebar (280px wide on desktop ≥ 1024px)</div>
Mixin typograficzny
Mixin stylu tekstu zapewniający spójną skalę typograficzną:
<h2 class="heading">Heading text style</h2>
<p class="body">Body text style</p>
Mixin a funkcja
Mixiny generują deklaracje CSS, a funkcje zwracają wartość. Mixin należy stosować, gdy trzeba wygenerować wiele reguł CSS, a funkcję — gdy potrzebna jest jedna obliczona wartość.
Unikanie nadmiernego używania mixinów
Zbyt wiele mixinów tworzy abstrakcyjne warstwy pośrednie, które trudno debugować. Mixin należy tworzyć tylko wtedy, gdy dany wzorzec jest używany co najmniej 3 razy. W przypadku stylów jednorazowych należy po prostu napisać CSS bezpośrednio.
Szybkie sprawdzenie
Jaki jest cel elementu @content wewnątrz definicji mixina Sass?
Podsumowanie
Mixiny definiuje się za pomocą @mixin, a używa za pomocą @include. Mixiny przyjmują parametry z opcjonalnymi wartościami domyślnymi. @content umożliwia wywołującemu wstawianie bloków CSS do mixina — dzięki temu można tworzyć wzorce opakowujące, takie jak pomocnicze mixiny dla zapytań media. Mixiny należy tworzyć tylko dla wzorców używanych wielokrotnie, aby uniknąć kosztu nadmiernej abstrakcji.
Często zadawane pytania
Czy lekcja „Miksiny i dołączanie” jest bezpłatna?
Tak — pełny tekst „Miksiny i dołączanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Miksiny i dołączanie”?
Twórz wielokrotnie używane bloki stylów za pomocą @mixin i dołączaj je w dowolnym miejscu przy użyciu @include. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Miksiny i dołączanie”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zmienne, zagnieżdżanie i fragmenty
- Miksiny i dołączanie
- Extend i selektory zastępcze
- Funkcje Sass i sterowanie przepływem