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
  • Z operatorów wynik css będzie:
    div {
    height: 100px;
    width: 150px;
    margin-top: 50px;
    padding-bottom: 10px;
    border-radius: 50px;
    }

  • Emil Buszyło

    Stosując się do powyższych rad chciałem zastosowac coś takiego :
    @for $i from 1 through 10 {
    .item-#{$i} {
    background: url(‘../img/stuf/image-#{$i}.jpg’);
    ścieżka jest prawidłowa, w kodzie wszystko podopinane a efektu w postaci wyplucia przez pętle 10 różnych zdjęć brak, jakiś pomysł ?