Używanie preprocesorów znacząco zmniejsza ilość czasu, którego developer potrzebuje do wprowadzania odpowiednich zmian. Skupmy się na porównaniu LESS i SASS. Oba języki korzystają z podobnych funkcjonalności jak zmienne, pętle, czy zagnieżdżania jednak korzystanie z nich trochę się różni. Sprawdźmy czym różnią się preprocesory SASS i LESS.
Obliczenia
LESS nie zwraca uwagi na jednostki dodawanych liczb za to SASS wyświetli błąd – niekompatybilne jednostki.
// LESS
width: 100px + 2em; // zwraca 102px
// SASS
width: 100px + 2em; // zwraca błądTworzenie zmiennych
// LESS
@variable: 100px;
// SASS
$variable: 100px;Warunki
// LESS
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
// SASS
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
}
}Mixins
Wywoływanie funkcji z parametrem zwracającym blok kodu.
// LESS
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
// SASS
@mixin bordered($width) {
border: $width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
}Pętle
// LESS
.loop(@counter) when (@counter > 0){
.loop((@counter - 1));
.border-@{counter} {
border: 1px * @counter solid blue;
}
}
// SASS
@for $i from 1px to 3px {
.border-#{i} {
border: $i solid blue;
}
}
