close
photo-1444090542259-0af8fa96557e

W drugiej części kursu preprocesora SASS zajmiemy się kolejnymi jego elementami – operatorami matematycznymi, pętlami oraz dziedziczeniem selektorów.

Operatory matematyczne:

W SASS możemy używać operatorów matematycznych (+, -, *, /, %). Ten kod SASS:

zostanie zamieniony na poniższy kod CSS:

Podczas wykonywania dzielenia musimy pamiętać o zawarciu go w nawiasach ( ). Wyjątkiem jest dzielenie zmiennych i funkcji:

Dzielenie wykona się ponieważ jest przeprowadzone na zmiennej.

Możemy też wykonywać te operacje na kolorach:

Powstały kod CSS:

Pętle:

Pętle w SASS przy odpowiednim użyciu potrafią znacznie skrócić kod. Załóżmy, że chcemy mieć inne tło obrazkowe w każdym z 5 divów. Nie mając do dyspozycji preprocesora napisalibyśmy taki kod HTML:

CSS:

Jest tutaj sporo powtarzania, którego powinniśmy unikać. Z pomocą przychodzi nam SASS:

Ta pętla wykona 5 obrotów za każdym razem dopisując numer obrotu do klasy i nazwy obrazka. W efekcie otrzymamy kod CSS, który wcześniej napisaliśmy ręcznie.  Pętla for działa świetnie z operatorami matematycznymi. Możemy ostylować divy w taki sposób, żeby stawały się coraz jaśniejsze:

Efekt:
kurs sass

Kolejną pętla jest each:

W tym przykładzie pętla each została użyta do podłożenia obrazkowego tła pod kolejne sekcje strony. Wynikowy kod CSS wygląda tak:

Ostatnią pętlą jest while:

Wynikowy CSS:

Pętla będzie się wykonywać dopóki warunek $i > 0 będzie spełniony.

Dziedziczenie:

Kolejną, bardzo przydatną funkcjonalnością SASS jest możliwość dziedziczenia stylów po innych elementach. Zobaczmy przykład:

Wynikowy CSS:

Wspólne style zostały przypisane do jednej reguły. W regułach .correct i .incorrect pozostały tylko ich indywidualne style.  Dziedziczenia po innych selektorze dokonujemy poprzez użycie słowa @extend i nazwy klasy poprzedzonej kropką wewnątrz reguły.

To już wszystko w drugiej części kursu SASS. W kolejnej części pokażę Ci kilka przydatnych funkcji, które jeszcze bardziej przyśpieszą Twoją pracę.

Pozdrawiam 🙂

Tags : dziedziczenieoperatorypętlepreprocesory css