Mixiny, czyli własne funkcje
Kończąc poprzednią lekcję napisałem, że wbudowanych funkcji w SASS jest wiele, dlaczego mielibyśmy tworzyć kolejne, własne funkcje? Jest na to prosta odpowiedź: Bo SASS nie zna naszych zamiarów i nie dostosowuje się do naszych potrzeb. To my sami musimy go dostosować. Podobnie jak w innych językach programowania funkcje tworzymy po to, aby unikać powtórzeń w kodzie oraz aby ułatwić sobie wprowadzenie ewentualnych późniejszych zmian. Podobnie jest w SASS. Łatwiej jest napisać jedną funkcję, a potem ją tylko dołączać do kodu niżeli za każdym razem kopiować i wklejać dany kod. Dodatkowo przy takim zapisie zyskujemy kolejną ważną cechę. Mianowicie, aby zmienić daną rzecz w wielu miejscach, wystarczy tylko zmienić jedną funkcję, a całą resztę zrobi za nas SASS. Prawda, że fajnie?
Tworzenie prostego mixinu
Funkcje własne użytkownika napisane w SASS noszą nazwę mixiny. Definiuje się je za pomocą słowa kluczowego@mixin, ale używasz już ich z pomocą słowa kluczowego@include. Prościej będzie wytłumaczyć to na przykładzie:
| 1234567 | @mixin withBottomMargin(){margin-bottom:16px;}h1{@include withBottomMargin();} |
|---|---|
W pierwszych trzech linijkach widzisz bardzo prostą definicję mixinu. W blokuh1następuje dołączenie tegoż mixinu do kodu.
Tak jak wspomniałem wcześniej, najlepszą praktyką jest wydzielenie wszystkich mixinów do osobnego pliku_mixin.scss. Pozwoli nam to używać tych samych mixinów w całym kodzie, a nie tylko w obrębie jednego pliku. Nie będziemy też musieli definiować po kilka razy takich samych mixinów.
Bardziej użyteczny przykład
Jak łatwo można się domyślić powyższa funkcja nie daje nam wiele zysku. Można by po prostu wpisać na stałemargin-bottomi po kłopocie. Spójrz jednak na mixin poniżej:
| 1 2 3 4 5 6 7 8 91011 | @mixin vendor-prefix($name,$argument){-webkit-#{$name}:#{$argument};-ms-#{$name}:#{$argument};-moz-#{$name}:#{$argument};-o-#{$name}:#{$argument};#{$name}:#{$argument};}.animated-element{@include vendor-prefix(‘transform-origin’,‘00’);} |
|---|---|
Powyższy kod jest już nieco bardziej zaawansowany. Po pierwsze jak łatwo zauważyć mixin (tak jak funkcje w innych językach programowania) pozwala na przyjęcie parametrów. Ich ilość jest nieograniczona i zależy tylko od potrzeb użytkownika. W powyższym przykładzie potrzebujemy dwóch parametrów$namei$argument. Nazwy te nie są z góry wymuszone, parametry możesz nazwać dowolnie. Mixin ten ma za zadanie obsłużyć wszystkie prefixy, dla wszystkich popularnych przeglądarek. Zatem zarówno name jak i argument będą po prostu ciągami znaków.
Zawartość tej funkcji zawiera jeszcze jedną ciekawą rzecz, a mianowicie interpolacje. Co to takiego? To nic innego jak wstawienie zmiennej do kodu bez użycia łączenia ciągów znaków. W niektórych przypadkach jest ono niezbędne do ustawienia konkretnej zmiennej np. w nazwie właściwości. Składnia jest bardzo prosta:
| 1 | #{$nazwa_zmiennej} |
|---|---|
#w tym przypadku nie oznacza wprowadzenia identyfikatora.
Dzięki takiemu mixinowi mamy pewność, że używając niestandardowych właściwości, zostaną one obsłużone w każdej przeglądarce, nawet w tych, które potrzebują do działania konkretnego prefixu. Powyższy kod po kompilacji będzie w CSS wyglądał tak:
| 1234567 | .animated-element{-webkit-transform-origin:00;-ms-transform-origin:00;-moz-transform-origin:00;-o-transform-origin:00;transform-origin:00;} |
|---|---|
Takich mixinów możesz stworzyć dowolną ilość w swoim kodzie. W internecie znajdziesz o wiele bardziej złożone rozwiązania, które rozwiążą wiele z Twoich problemów. Pamiętaj też, że warto używać funkcji w SASS w ten właśnie sposób, ponieważ bardzo łatwo o zmianę. Wyobraź sobie teraz sytuację, że szef każe usunąć wsparcie dla opery w całym projekcie. Wystarczy, że w powyższym mixinie usuniesz jedną linijkę i cały projekt zostaje odchudzony o prefix dla opery.
Zadanie 1
W pliku HTML znajduje się jeden element z klasąbox. Powinien być on w kolorze czerwonym oraz powinien być wyśrodkowany. Dodatkowo jego wymiary mają wynosić250pxx250px.
Podsumowanie
W tym rozdziale dowiedziałeś się czym jest mixin w SASS i jak w łatwy sposób utworzyć go w swoim kodzie. Wiesz już dlaczego warto go używać i jakie niesie ze sobą korzyści. Zapraszam Cię do następnej lekcji poświęconej rozszerzaniu klas.