@Mixin i @include in sass | Wyjaśnione

Składnie niesamowity arkusz stylów (SASS) jest popularny w celu ułatwiania użytkownikom pisania suchego (nie powtarzaj się) kod CSS, który jest czysty, czytelny i wielokrotnego użytku. W ten sposób Sass zwiększa potencjał podstawowego języka CSS. Jednym z takich sposobów napisania kodu CSS wielokrotnego użytku przy użyciu SASS jest tworzenie mixina przez regułę @Mixin i włączenie tej miksiny za pomocą reguły @Include. Aby dowiedzieć się więcej o tych zasadach, postępuj zgodnie z poniższym artykułem.

Sass @Mixin i @include zasady

Reguła @Mixin w SASS pozwala utworzyć kod CSS wielokrotnego użytku. Ten kod wielokrotnego użytku składa się z zbędnych stylów, dlatego są one zgrupowane razem, aby można je było używać w dowolnym miejscu w kodzie. Ten kawałek kodu nazywa się miksinem. W celu użycia mixina w kodzie, SASS zapewnia zasadę @Include.

Tutaj poprowadzimy Cię w zakresie tworzenia i użycia mixina.

Jak zdefiniować mieszanie

W celu zdefiniowania miksowania użyj dyrektywy @Mixin i zgrupuj ze sobą redundant i wielokrotnego użytku CSS.

Składnia zasady @Mixin

@Mixin mixin-name
wartość nieruchomości;
wartość nieruchomości;

Po użyciu dyrektywy @Mixin musisz wymienić ten konkretny miksin, a następnie napisać właściwości CSS w tym bloku, a mixin zostaną pomyślnie utworzone. Oto przykład mieszanki.

@Mixin nagłówek
kolor tła: zielony;
Rozmiar czcionki: 30px;
Font-Weight: Bold;

Voila, stworzono miksowanie nagłówka! Teraz za każdym razem, gdy musisz stylizować nagłówek, nie musisz pisać tych właściwości raz po raz, po prostu używaj powyższego miksowania i możesz iść. Ale jak używać tej mieszanki? Cóż, jak wspomniano powyżej za pomocą reguły @include, można użyć mieszanki.

Składnia zasady @include

selektor
@include mixin-name;

W ten sposób możesz dołączyć miksin w swoim kodzie, jeśli jest to wymagane. Na przykład dołączmy miksin nagłówka, który stworzyliśmy powyżej.

.nagłówek
@Include Header;

Gdy plik SASS jest przytłoczony, powyższy kod poda następujący plik wyjściowy CSS.

.nagłówek
kolor tła: zielony;
Rozmiar czcionki: 30px;
Font-Weight: Bold;

Kolejną zaletą tej zasady @include jest to, że możesz dołączyć wiele miksów razem. Na przykład poniżej uwzględniliśmy trzy miksiny w innym mieszaniu.

@Mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

W ten sposób możesz razem używać wielu miksów.

Do tej pory dowiedzieliśmy się o miksinach bez przekazywania argumentów. W następnej sekcji zobaczymy, w jaki sposób możesz przekazać argumenty do mixina.

Jak przekazać argumenty do mieszanki

Przekazywanie argumentów do Mixina okazuje się przydatne, gdy chcesz grupować podobny zestaw właściwości CSS, jednak wartości przekazane do tych właściwości mogą się różnić. Oto jak możesz zdefiniować mieszanie, przekazując argument.

@Mixin Border ($ Color, $ szerokość)
granica: $ szerokość kropkowana $ kolor;

.pojemnik
@Include Border (Pink, 2px);

.skrzynka
@Include Border (Purple, 3px);

W powyższym fragmencie kodu stworzyliśmy miksin po granicy nazwy i przekazaliśmy mu dwa argumenty. Podczas korzystania z tej mieszanki podczas stylizacji innych elementów użyliśmy reguły @Include, w międzyczasie wartości przekazane do mieszanki granicznej różnią się w każdym przypadku. Tutaj przekazane argumenty są ustawione jako zmienne.

Inną rzeczą, którą możesz zrobić z miksinami, jest przypisanie wartości domyślnych do argumentów przekazanych miksom.

@Mixin Border ($ szerokość: 2px, $ Color: Pink)
granica: $ szerokość kropkowana $ kolor;

Jeśli chcesz zachować wartości domyślne, zależy to jednak od ciebie, jeśli chcesz zmienić określoną wartość, oto jak to się zrobione.

.pojemnik
@Include Border ($ szerokość: 3px);

Kolor zastosowany na granicy selektora będzie taki sam, jak zdefiniowany w wartości domyślnej.

Wniosek

Reguła @Mixin w SASS pozwala utworzyć kod CSS wielokrotnego użytku o nazwie mixin, w którym możesz grupować nadmiarowe właściwości i wartości CSS, które można używać w dowolnym miejscu w kodzie w razie potrzeby. Tymczasem reguła @Include służy do dodania miksowania w kodzie. Możesz także przekazać argumenty do mixina, gdy chcesz grupować podobny zestaw właściwości CSS, mając różne wartości. To i wiele więcej o zasadzie @Mixin i @Include zostało dla Ciebie skompilowane.