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;
}
}
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ę.
Z operatorów wynik css będzie:
div {
height: 100px;
width: 150px;
margin-top: 50px;
padding-bottom: 10px;
border-radius: 50px;
}
Dzięki za wyłapanie tego błędu. Już poprawione 🙂
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ł ?