Wstęp do preprocesora Sass – dyrektywa @mixin


Wraz z rozwojem projektu, powstawaniem nowych modułów i funkcjonalności, kod CSS warstwy wizualnej staje się coraz bardziej złożony. Utrzymanie i rozwój kaskadowych arkuszy stylów może okazać się problematyczne.

Jak usprawnić swoją pracę i zoptymalizować pisany przez nas kod?

Bardzo dobrym rozwiązaniem okazuje się użycie preprocesora CSS.

W tym wpisie zostanie przedstawiona dyrektywa @mixin – potężne narzędzie, które oferuje nam preprocesor Sass.

 

@mixin

Dyrektywa @mixin, nazywana też w języku polskim domieszką (w tym wpisie będę używać obu tych określeń zamiennie), pozwala na zdefiniowanie zestawu właściwości CSS, których można użyć w dowolnym miejscu w kodzie Sass.

Po kompilacji do wynikowego kodu CSS zestaw reguł zdefiniowanych w domieszce wyświetla się tak samo, jak pozostałe, statycznie dodane właściwości CSS. Używanie domieszek w kodzie Sass pozwala nam na pracę zgodnie z zasadą DRY (ang. Don’t Repeat Yourself).

Domieszki definiuje się za pomocą dyrektywy @mixin. Aby móc wykorzystać zdefiniowaną już domieszkę, wystarczy dołączyć ją za pomocą dyrektywy @include w dowolnym miejscu w kodzie.

Poniżej prosty przykład w jaki sposób definiujemy domieszki oraz jak możemy ich użyć w kodzie:


@mixin sample { 
 
   color: #78a614;
  
}
  
 
h1 {
  
   @include sample; 
}

 
Dyrektywa @mixin może zaoferować zdecydowanie więcej.

Oprócz określania statycznych reguł CSS, możemy również użyć argumentów w deklaracji dyrektywy @mixin, jak również zdefiniować dla nich domyślne wartości. Kiedy może okazać się to przydatne? Na przykład wtedy, gdy atrybuty powinny przyjmować różne wartości.
Poniżej przykład zastosowania dyrektywy @mixin wraz z argumentami:


@mixin headline ($color, $size: 12px) { 
   color: $color; 
   font-size: $size; 
}
 
 
h1 { 
   @include headline(#68a614); 
}

Jak widać w przykładzie zastosowano domieszkę, która przyjmuje dwa argumenty, z czego jeden ($size) posiada domyślnie zdefiniowaną wartość, która wynosi 12px.
W wywołaniu domieszki możemy w argumentach podać zarówno wartości dla obu argumentów, jak i pominąć argument $size (staje się on parametrem opcjonalnym) – wówczas zostanie użyta zdefiniowana już przez nas wcześniej wartość domyślna.

Co w sytuacji, gdy nie mamy pewności ile argumentów będziemy chcieli przekazać?
Interesujący przykład z użyciem nieokreślonej liczby argumentów jest przedstawiony poniżej:


@mixin margin($values...) {     
    @each $val in $values { 
        margin: #{$val}; 
    } 
} 
div { 
    @include margin(5px 1px 10px 3px); 
}

W tym przypadku podaliśmy kilka argumentów, które zostały potraktowane przez naszą domieszkę jako lista, którą przypisane zostają do właściwości margin. Jest to świetne rozwiązanie w przypadku, gdy nie wiemy z góry ile argumentów powinien przyjąć nasz mixin.
Dzięki temu nasz kod zyskuje na przejrzystości oraz jest bardzo zwięzły.

Parę słów o dziedziczeniu – dyrektywa @extend

Pisząc o mixinach nie sposób nie wspomnieć o dyrektywie @extend.
Do czego ona służy? Najprościej ujmując, użycie @extend umożliwia udostępnienie właściwości CSS z jednego selektora na drugi.
@extend bardzo łatwo pomylić z dyrektywą @mixin, ponieważ w kodzie Sass wydają się one bardzo podobne w działaniu.
Różnice zauważalne są po skompilowaniu kodu.

Spójrzmy na przykład:


.info { 
   font-size: 28px; 
   text-transform: uppercase; 
} 
 
.success { 
   @extend .info; 
   color: #C779D0; 
}

Po skompilowaniu otrzymujemy taki oto kod:


.info, 
.success { 
   font-size: 28px; 
   Text-transform: uppercase; 
} 
 
.success { 
   color: #C779D0; 
}

Selektory zostały zgrupowane w miejscu, w którym zdefiniowaliśmy dyrektywę @extend. W przeciwieństwie do @mixin, tutaj w skompilowanym kodzie zestawy właściwości nie są kopiowane – zamiast tego otrzymujemy zgrupowane selektory, które korzystają z tego samego zestawu właściwości. Dodatkowo @extend nie przyjmuje argumentów.
Przy nierozważnym zastosowaniu dyrektywy @extend może okazać się, że w skompilowanym kodzie otrzymamy grupę kilkudziesięciu (sic!) zgrupowanych selektorów, przez co możemy otrzymać niechciane i nieoczekiwane rezultaty.

Do dzieła!

Podsumowując, dyrektywa @mixin stwarza ogromne możliwości dla developera oraz pozwala na pisanie eleganckiego i zwięzłego kodu. Dzięki temu kod jest łatwiejszy w utrzymaniu a jego rozwijanie jest zdecydowanie łatwiejsze.

Kiedy warto sięgnąć po użycie mixinów?
Na przykład wtedy, gdy widzimy, że dany zestaw reguł CSS powtarza się, lub kiedy reguły tworzą jakąś semantyczną grupę właściwości – na przykład style dla obramowania.

W internecie można znaleźć wiele domieszek gotowych do użycia w projekcie. Zachęcamy do eksperymentowania i tworzenia własnych dyrektyw, skrojonych na miarę naszych potrzeb.

Więcej na temat dyrektywy @mixin można przeczytać na stronie preprocesora Sass: https://sass-lang.com/guide

Kinga Nowak
Front-End Developer

SALESmanago o platforma Customer Engagement, zaprojektowana dla efektywnych i głodnych sukcesu zespołów marketingowych w eCommerce. Dla marketerów, którzy pragną być zaufanymi partnerami dla swoich CEO. Z naszego rozwiązania korzysta ponad 2000 biznesów online średniej wielkości w 50 krajach oraz liczne globalne marki takie jak Starbucks, Vodafone, Lacoste, New Balance czy Victoria's Secret.

SALESmanago zapewnia maksymalizację wzrostu przychodów oraz poprawy wskaźników KPI dla eCommerce wykorzystując trzy zasady: (1) Customer Intimacy, aby stworzyć autentyczne relacje z klientami w oparciu o dane Zero- i First-Party, (2) Precision Execution, aby zapewnić doskonałe omnichannelowe doświadczenie klienta dzięki hiper-personalizacji oraz (3) Growth Intelligence, która łączy wskazówki opracowane przez specjalistów oraz AI, umożliwiając pragmatyczne i szybkie podejmowanie decyzji w celu maksymalizacji efektu.

Czytaj więcej na: www.salesmanago.pl

Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku
Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku

    Prawie wszyscy przedsiębiorcy planują rozpocząć pozyskiwanie Danych Zero-Party w celu rozwiązania problemu deprecjacji informacji. Jednocześnie, jak pokazują badania Forrestera, mniej niż połowa z nich wie, jak z powodzeniem korzystać z takich zbiorów danych!   W lutym 2022 r. Forrester Consulting przeprowadził ankietę wśród 200 osób decyzyjnych różnych szczebli (manager+), skoncentrowanych na pozyskiwaniu klientów. […]

Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?
Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?

    Customer Engagement Platform to znacznie więcej niż platforma Customer Data, którą już znasz, być może nawet używasz. Jej funkcje znacznie wykraczają poza zbieranie i ujednolicanie danych, a umacniający wpływ na zespoły marketingowe jest ogromny. W tym artykule szczegółowo wyjaśnimy różnicę między tymi systemami. Aby stawić czoła wyzwaniom obecnej recesji, marketerzy muszą w dużym […]

Recesja lojalności w eCommerce. Jak ma sobie z nią radzić marketer?
Recesja lojalności w eCommerce. Jak ma sobie z nią radzić marketer?

    Inflacja sprawia, że klienci zastanawiają się dwa razy, nim otworzą portfel. I choć wciąż kupują, to ich zachowanie się zmieniło. W sektorze eCommerce obserwujemy inflacyjną recesję lojalności, która stawia marketerów w paradoksalnej sytuacji: muszą zwiększać swoją efektywność bez zwiększania kosztów operacyjnych. Jest z tego wyjście  – z głową.   Zachowanie klientów się zmieniło […]

Skąd ten Lean? Nowe podejście SALESmanago do marketingu w eCommerce
Skąd ten Lean? Nowe podejście SALESmanago do marketingu w eCommerce

    Jak w chińskim przysłowiu, żyjemy w ciekawych czasach, które zmuszają nas do przekraczania ograniczeń i jeszcze efektywniejszego działania – mówiąc prościej, zgodnie z zasadami lean. W tym artykule przedstawiamy najpilniejsze wyzwania w dzisiejszym marketingu eCommerce i dostarczamy wskazówek, jak przygotować się na zmiany, których efekty już widzimy wokół nas.   Ciekawe czasy   […]

4 sposoby na personę i odszukanie wartościowych nabywców we własnej bazie danych – z głową!
4 sposoby na personę i odszukanie wartościowych nabywców we własnej bazie danych – z głową!

    W poprzednim artykule zwróciliśmy uwagę, że Lean Marketing wymaga inteligentnych, wysoce wydajnych, drobnych kroków, zamiast wielkich planów marketingowych. W tym artykule pokażemy 4 praktyczne sposoby na wykonanie takich kroków i znalezienie wartościowych klientów we własnej bazie danych.   Wzmocnienie elementów strategii lean   Jak wskazaliśmy również w poprzednim artykule, niektóre elementy strategii Lean […]

Dlaczego Lean Marketing to strzał w dziesiątkę dla eCommerce?
Dlaczego Lean Marketing to strzał w dziesiątkę dla eCommerce?

    Najpierw było Lean Manufacturing, potem Lean Management. Ukonstytuowały one powszechne rozumienie terminu Lean, który oznacza osiąganie celów bez kosztownych strat lub nadwyżek – czasu, zasobów lub wysiłku. Lean Marketing zawiera wszystkie te elementy, a ponadto czerpie wiele ze stylu zarządzania projektami Agile. Lean Marketing jest również znacznie łatwiejszy, gdy masz platformę Customer Data […]

[Nowa Funkcjonalność] SALESmanago uruchamia Centrum integracji: wszystkie Twoje integracje w jednym miejscu!
[Nowa Funkcjonalność] SALESmanago uruchamia Centrum integracji: wszystkie Twoje integracje w jednym miejscu!

    Dzięki SALESmanago Twoje ulubione narzędzia marketingowe są teraz łatwiej dostępne niż kiedykolwiek. Możesz cieszyć się nimi wszystkimi, zebranymi w jednym miejscu. Wystarczy kliknąć. Zasil swój marketing danymi klientów, korzystając ze wszystkich swoich ulubionych narzędzi. Użyj gotowych integracji lub dodaj Kod Monitorujący do swojej witryny, aby błyskawicznie zintegrować ją z SALESmanago. Integracja napędza marketing […]

10 trików na niesamowitą optymalizację współczynnika konwersji
10 trików na niesamowitą optymalizację współczynnika konwersji

    W naszym ostatnim artykule zwróciliśmy uwagę na współczynnik konwersji i jego fundamentalne znaczenie dla eCommerce – w końcu sklep internetowy z milionami odwiedzających, który nie sprzedaje, to w zasadzie tylko zwykła strona internetowa. Dziś pokażemy ci 10 praktycznych sposobów na stabilne, ugruntowane zwiększenie współczynnika konwersji – miesiąc po miesiącu.   Jak wyliczyć współczynnik […]

Dlaczego Conversion Rate to najważniejsza metryka w eCommerce?
Dlaczego Conversion Rate to najważniejsza metryka w eCommerce?

    W jednym z naszych wcześniejszych wpisów pokazaliśmy, jak zyskujące na popularności podejście CLV-ROI zmienia modele biznesowe eCommerce. Aby jednak znaleźć się w punkcie, w którym Twoi klienci zamieniają się w lojalnych fanów, musisz najpierw zamienić odwiedzających w klientów. Dlatego postrzegamy Conversion Rate (CR), czyli współczynnik konwersji, jako najbardziej fundamentalną metrykę w eCommerce. Bez […]

Jak wpleść dane zero-party w marketing strony internetowej?
Jak wpleść dane zero-party w marketing strony internetowej?

    Nasze Centrum Preferencji Klienta, uruchomione na początku tego roku, otworzyło zupełnie nowy świat możliwości hipersegmentacji. Teraz kreatywne wykorzystanie wielu naszych funkcji pozwoli Ci dostarczać komunikat zawsze dopasowany do indywidualnych potrzeb i gustów oraz zamienić Twój CDP w Platformę Customer Intimacy i w konsekwencji, budowę wyjątkowo solidnych relacji. W wielu naszych artykułach znajdziesz wszelkiego […]