#4 SASS + Compass: sterowanie przepływem


31 sierpnia 2013 / Michał Załęcki


Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak nie trudno zauważyć SASS czerpie z języków programowania choć sam oczywiście nim nie jest, nie mniej jednak nie zabrakło instrukcji sterowania przepływem i właśnie na nich dzisiaj się skupię. Zgodnie z dokumentacją SASS instrukcje te nie zostały zaimplementowane po to by używać ich w „day-to-day styling”, a w funkcjach czy w wstawkach lub różnych bibliotekach by uczynić je bardziej elastycznymi. Nie wyklucza to oczywiście ich użycia w „zwykłym” kodzie, to jak zostaną wykorzystane zależy już od preferencji developera. Dzisiaj nie będę omawiał dokładnie działania instrukcji sterowania przepływem, zakładam, że ich idea i działanie jest już Ci znane z któregoś języka programowania, choćby JavaScript, PHP czy C, skupie się na ich konstrukcji.

SASS i LESS

Instrukcja warunkowa

Instrukcja warunkowa, jako jedna z najbardziej popularnych konstrukcji sterowania przepływem otwiera dzisiejsze zestawienie. Tutaj bez niespodzianek, ot taki prosty przykład.

Można też łączyć konstrukcje instrukcje warunkowe w bloki else if, przykład z dokumentacji:

Pętla FOR

Trzeba przyznać, że pętla for wygląda w SASS dość oryginalnie. Jak na pętle for przystało musimy podać pierwszą i ostatnią wartość jakie przyjmie (bądź do której dojdzie) zmienna iteracyjna. W SASS mamy dwa typy pętli for. Ze słowem kluczowym through i to. W przypadku tego ostatniego zmienna iteracyjna nie osiąga ostatniej wartości.

Pętla EACH

Pętla each działa na zbiorze elementów. Zbiór ten może zostać stworzony przed pętlą i przypisany zmiennej lub w samej pętli each.

Pętla WHILE

Pętla while będzie wykonywać się tak długo jak wyrażenie będzie zwracać prawdę. Konstrukcja ta zapewnia nam bardziej kompleksową kontrolę nad zmienną iteracyjną niż pętla for.

Podsumowanie

Jeżeli uczciwie zapoznałeś się z informacjami w tej i w poprzednich częściach tego kursu to masz podstawy, które pozwalają rozpocząć Ci pracę z Compass i właśnie tym zajmować będziemy się w kolejnych częściach kursu.

Przydatne linki


Tagi:


4 odpowiedzi na “#4 SASS + Compass: sterowanie przepływem”

  1. mercs600 pisze:

    Świetne artykuły o SASS, wiesz może jakie są różnice pomiędzy SASS a SCSS oprócz tych składniowych ?

    • Dzięki :) Nie ma innych różnic. No poza składnią, inne jest oczywiście rozszerzenie plików, które będą kompilowane. SASS to starsza składnia inspirowana Haml, a SCSS jest przedstawiane jako rozszerzenie CSS3, przy czym trzeba te stwierdzenie traktować z pewnym dystansem.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.