LESS vs Sass

„Który preprocesor CSS użyć?” to pytanie, które zadaje sobie każdy początkujący front-end developer. Nawet w X-Coding zdarzały się dyskusje o przewagach jednego nad drugim. To, co mnie cieszy, to fakt, że nikt już specjalnie nie kwestionuje, czy w ogóle używać preprocesora, a dyskusja zeszła na porównanie, którego użyć.

Dzisiaj spróbujemy zmierzyć się z różnicami pomiędzy Sass i LESS, żebyś sam mógł zdecydować, co jest ciekawsze dla Ciebie. Poznasz też moją opinię, ale dopiero na sam koniec 🙂

Trochę (ale tylko trochę) historii

Arkusze styli CSS zostały opracowane przez organizację W3C w 1996r. Dzisiaj nie ma frontend developera, który by nie był biegły w CSS3, bo to dzięki niemu tworzy się styl prezentacji danej strony WWW.

CSS decyduje o tym, jak elementy mają zostać wyświetlone w przeglądarce, jakie kolory będzie widział użytkownik czy ustala rozmiar odstępów pomiędzy poszczególnymi fragmentami strony.

Przed pojawieniem się CSS wszystkie informacje dotyczące wyglądu były zawarte w znacznikach HTML. Wraz z pojawieniem się języka CSS te informacje zostały przeniesione do osobnego pliku (chociaż deklaracje stylu mogą nadal być osadzane inline). Zamiast definiowania stylu np. dla nagłówka w każdym miejscu gdzie został użyty w kodzie, w pliku CSS jedna reguła jest odpowiedzialna za wygląd wszystkich nagłówków, np.: dla h1. W ten sposób kod HTML stał się bardziej czytelny i łatwiejszy w utrzymaniu.

Preprocesory CSS

To, czego od zawsze brakowało CSS-om, to podstawowe elementy programowania. Czasami aż prosiło się, żeby wyciągnąć jakiś kolor do zmiennej i łatwiej w ten sposób panować nad użyciem. Takich przykładów można mnożyć bardzo długo.

Po to powstały dynamiczne języki arkuszy stylów. Dzięki nim praca wemasterów jest szybsza i bardziej wydajna. Pomagają także zapanować nad długiem technologicznym. Oczywiście nadal musisz znać podstawy CSS, żeby pracować z preprocesorami, ale to chyba nie powinno nikogo dziwić. Inwestycja zwraca się w postaci łatwiejszego stylowania strony.

Dwa najbardziej popularne dziś to Sass i LESS. Obydwa udostępniają nam podstawowe konstrukcje, takie jak zmienne, funkcje czy instrukcje warunkowe. Możemy też zagnieżdżać reguły, co pozytywnie wpływa na uporządkowanie samego arkusza. Który zatem wybrać? Wymienimy sobie różnice pomiędzy tymi dwoma preprocesorami.

Zmienne

/ Sass
$background: #000000; 
body {
    background-color: $background;
}

// LESS
@background: #00000; 
body {
    background-color: @background;
}

Nie ma większej różnicy pomiędzy zmiennymi. Sass używa dolara, LESS małpy. W użyciu bardziej zaawansowanym warto pamiętać, że redeklaracja zmiennej w zagnieżdżeniu w Sass działa globalnie a w LESS tylko lokalnie.

Zagnieżdżanie

Zagnieżdżanie kodu to jedna z bardziej przydatnych rzeczy w preprocesorach. Przyspiesza pracę i sprawia, że kod jest bardziej czytelny. Tu nie ma różnic pomiędzy preprocesorami:

nav { 
    ul { ... } 
    li { ... } 
}

Mixiny

Mixiny, czyli reużywalne style, przyspieszają stylowanie HTML. Główna róznica, to fakt, że w LESS wszystko jest jednocześnie definicją mixin, a w Sass definicji służy selektor @mixin. Inaczej wygląda też renderowanie do CSS:

// Sass
 @mixin border-radius($radius) { 
    -webkit-border-radius: $radius; 
    -moz-border-radius: $radius; 
    -ms-border-radius: $radius; 
    border-radius: $radius; } 

.box1 { 
    @include border-radius(10px); 
}

// wynik CSS
.box1 { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
}

i dla porównania LESS:

// LESS
.box1 { 
    color:red; 
} 

.boxClass { 
    .box1; 
}

// wynik CSS
.box1 { 
    color: red; 
} 

.boxClass { 
    color: red; 
}

W LESS również do konstrukcji możemy przekazać argumenty (w szczególności pusty, jeśli nie chcemy, żeby jakaś klasa była renderowana):

// LESS
.class1() { 
    color:red; 
} 

.boxClass { 
    .class1(); 
}

// wynik CSS
.boxClass { 
    color: red; 
}


// LESS
.class2(@color) { 
    color:@color; 
} 

.boxClass { 
    .class2(blue); 
}

// wynik CSS
.boxClass { 
    color: blue;
}

Funkcje + , – , * , /

// Sass
$base-line-height: 16px * 1.5; 

@function emCalc($size-in-pixels, $base : $base-font-size) { 
    @return $size-in-pixels / $base * 1em; 
} 

h1 { 
    font-size: emCalc(72px); 
    margin-bottom: emCalc($base-line-height, 72px); 
}

// LESS
@color: #888; 
@width: 10px; 

div { 
    border-top-color: 
    @color + #111; 
    border-right-color: @color - 100; 
    border-bottom-color: @color * 2; 
    border-left-color: @color / 2.5; 
    border-width: @width / 5; 
}

Dziedziczenie

// Sass
.box2 { 
    color: red; 
}

.box1 { 
    @extend .box2; 
    background: blue; 
} 

// LESS
.box2 { 
    color: red; 
}

.box1 { 
    &:extend(.box2); 
    background: blue; 
} 

Pętle

Ostatnia kwestia to pętle, które też mają nieco inną składnię. Najpierw kilka przykładów Sass:

// Sass
@for $i from 0 through 2 { 
    .mb-#{$i*10} { 
        margin-bottom: 10px * $i; 
    } 
} 

@for $i from 0 to 2 { 
    .mt-#{$i*10} { 
        margin-top: 10px * $i; 
    } 
}


// wynik CSS
.mb-0 { 
    margin-bottom: 0px; 
} 

.mb-10 { 
    margin-bottom: 10px; 
} 

.mt-0 { 
    margin-top: 0px; 
} 

.mt-10 { 
    margin-top: 10px; 
}

// Sass
@each $icon in facebook, gplus, twitter { 
    .icon-#{$icon} { 
        background-image: url('/img/icon/#{$icon}.png'); 
    } 
} 

$vehicles: (car, plane, bike); 
@each $icon in $vehicles { 
    .icon-#{$icon} { 
        background-image: url('/img/icon/#{$icon}.png'); 
    } 
}

// wynik CSS
.icon-facebook { 
    background-image: url("/img/icon/facebook.png"); 
} 
.icon-gplus { 
    background-image: url("/img/icon/gplus.png"); 
} 
.icon-twitter { 
    background-image: url("/img/icon/twitter.png"); 
}
.icon-car { 
    background-image: url("/img/icon/car.png"); 
}
.icon-plane { 
    background-image: url("/img/icon/plane.png"); 
}
.icon-bike { 
    background-image: url("/img/icon/bike.png"); 
}

// Sass
$i: 10; 
@while $i >= 0 { 
    .p-#{$i*10} { 
        padding: 10px * $i; 
    } 
    $i: $i - 2; 
}

// wynik CSS
.p-100 { 
    padding: 100px; 
} 
.p-80 { 
    padding: 80px; 
} 
.p-60 {
    padding: 60px; 
} 
.p-40 { 
    padding: 40px; 
} 
.p-20 { 
    padding: 20px; 
} 
.p-0 { 
    padding: 0px; 
}

i dla porównania konstrukcja pętli w LESS:

// LESS
.loop(@counter) when (@counter > 0) { 
    .loop((@counter - 1)); 
    width: (10px * @counter); 
} 

div { 
    .loop(5); 
}

// wynik CSS
div { 
    width: 10px; 
    width: 20px; 
    width: 30px; 
    width: 40px; 
    width: 50px;
}

// LESS
.generate-columns(@n, @i: 1) when (@i =< @n) { 
    .column-@{i} { 
        width: (@i * 100% / @n); 
    } 
    .generate-columns(@n, (@i + 1)); 
}

.generate-columns(4);

// wynik CSS
.column-1 {
    width: 25%; 
} 
.column-2 { 
    width: 50%; 
} 
.column-3 { 
    width: 75%; 
} 
.column-4 { 
    width: 100%; 
}

To Sass czy Less?

Jeśli miałbyś zaufać mojej opinii, powiem: Sass. Jest bardziej rozwinięty, bardziej rozwijany i staje się powoli standardem, który wypiera LESS. Dlatego inwestycja w Sass wydaje się bardziej przyszłościowa. LESS jest z drugiej strony trochę łatwiejszy dla początkujących, więc może warto spróbować zacząć właśnie od niego z myślą o przeniesieniu się na „wyższy poziom” nieco później.

Pamiętaj jednak początek artykułu: po pierwsze, dobrze że używasz czegokolwiek. Po drugie, preprocesor ma Ci przyspieszyć pracę, więc jeśli już używasz LESS na co dzień i nie czujesz jakichś wielkich braków, chyba nie ma sensu się „przebranżawiać”. Ostatecznie to technologia jest dla nas, a nie odwrotnie, nieprawdaż?