Kurs SASS dla początkujących cz.2 Operatory, pętle i dziedziczenie

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:

div {
  height: (50px + 50);
  width: (200px - 50);
  margin-top: (10px * 5);
  padding-bottom: (50px / 5);
  border-radius: (101px % 51);
}

zostanie zamieniony na poniższy kod CSS:

div {
  height: 100px;
  width: 150px;
  margin-top: 50px;
  padding-bottom: 10px;
  border-radius: 50px;
}

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

$padding: 50px;

div {
  padding-bottom: $padding / 5;
}

Dzielenie wykona się ponieważ jest przeprowadzone na zmiennej.

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

div {
  background: (#c4da1a / 2);
}

Powstały kod CSS:

div {
  background: #626d0d; 
}

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:

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>

CSS:

.div-1 {
  background: url('images/image-1.jpg');
}

.div-2 {
  background: url('images/image-2.jpg');
}

.div-3 {
  background: url('images/image-3.jpg');
}

.div-4 {
  background: url('images/image-4.jpg');
}

.div-5 {
  background: url('images/image-5.jpg');
}

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

@for $i from 1 through 5 {

  .div-#{$i} {
    background: url('images/image-#{$i}.jpg');
  }

}

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:

@for $i from 1 through 5 {

  .div-#{$i} {
    height: 100px;
    width: 20%;
    float: left; 
    background: #111 * $i;
  }

}

Efekt:

Kolejną pętla jest each:

@each $element in about, portfolio, contact {
  .#{$element} {
    background-image: url('/images/#{$element}-bg.jpg');
  }
}

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:

.about {
  background-image: url("/images/about-bg.jpg");
}

.portfolio {
  background-image: url("/images/portfolio-bg.jpg");
}

.contact {
  background-image: url("/images/contact-bg.jpg");
}

Ostatnią pętlą jest while:

$i: 6;
@while $i > 0 {
  .size-#{$i} { font-size: 2em * $i; }
  $i: $i - 2;
}

Wynikowy CSS:

.size-6 {
  font-size: 12em; 
}

.size-4 {
  font-size: 8em; 
}

.size-2 {
  font-size: 4em; 
}

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:

.input {
  border: 1px solid #ccc;
  padding: 20px;
  color: #000;
}

.correct {
  @extend .input;
  border-color: green;
}

.incorrect {
  @extend .input;
  border-color: red;
}

Wynikowy CSS:

.input, .correct, .incorrect {
  border: 1px solid #ccc;
  padding: 20px;
  color: #000; 
}

.correct {
  border-color: green; 
}

.incorrect {
  border-color: red; 
}

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ę.