28 / 03 / 2017 Developers

Sass vs Less

Kaskadowe arkusze stylów czyli CSS

Język CSS został opracowany przez organizację W3C w 1996 r. Każdy front-end deweloper dobrze zna ten język, gdyż to właśnie dzięki niemu tworzy się prezentację danej strony WWW. To jak elementy mają zostać wyświetlone w przeglądarce, jakie kolory będzie widział użytkownik czy wielkość 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. 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

Dynamiczne języki arkuszy stylów zostały stworzone w celu przyspieszenia pracy webmastera oraz zwiększenia wydajności. Ułatwiają pracę nad ostylowaniem strony, jednak trzeba znać podstawy samego języka CSS aby móc rozpocząć pracę z preprocesorami. Do dwóch najpopularniejszych preprocesorów zalicza się Sass oraz Less. Stosując preprocesory mamy dostęp do elementów znanych z języków programowania, np.: do zmiennych, funkcji czy instrukcji warunkowych. Możliwość zagnieżdżania reguł powoduje, że kod jest bardziej czytelny i uporządkowany. Istnieje kilka metod kompilacji języka Sass i Less do natywnego kodu CSS, jednak o tym będzie w kolejny artykule, tutaj natomiast skupię się na samych różnicach pomiędzy strukturą pisania tych dwóch języków.

sass less css

Za pomocy tabeli postaram się przybliżyć różnice pomiędzy tymi dwoma preprocesorami.

Sass Less
zmienne $background: #000000;
body {background-color: $background;}
@background: #000;
body {background-color: @background;}
zagnieżdżanie nav {
ul {
}
li {
}
}
nav {
ul {
}
li {
}
}
mixins @mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box1 {
@include border-radius(10px);
}
.box1 {
color:red;
}
.boxClass {
.class1();
}
.box1() {
color:red;
}
.boxClass {
.class1();
}
.box1(@color) {
color:@color;
}
.boxClass {
.class1(blue);
}
wynik w CSS .box1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.box2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.box1 {
color: red;
}
.boxClass {
color: red;
}
.boxClass {
color: red;
}
.boxClass {
color: blue;
}
funkcje
+ , – , * , /
$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);
}
@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 .box1 {
@extend .box2;
background: blue;
}
.box2 {
color: red;
}
.box1 {
&:extend(.box2);
background: blue;
}
.box2 {
color: red;
}
pętle
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; }
}
@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’);
}
}
$i: 10;
@while $i >= 0 {
.p-#{$i*10} { padding: 10px * $i; }
$i: $i – 2;
}
CSS wynik .mb-0 {
margin-bottom: 0px;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-0 {
margin-top: 0px;
}
.mt-10 {
margin-top: 10px;
}
.icon-facebook {
background-image: url(„/img/icon/facebook.png”);
}
.icon-twitter {
background-image: url(„/img/icon/twitter.png”);
}
.icon-google {
background-image: url(„/img/icon/google.png”);
}
.p-100 {
padding: 100px;
}
.p-80 {
padding: 80px;
}
.p-60 {
padding: 60px;
}
.p-40 {
padding: 40px;
}
.p-20 {
padding: 20px;
}
.p-0 {
padding: 0px;
}
Less .loop(@counter) when (@counter > 0) {
.loop((@counter – 1));
width: (10px * @counter);
}
div {
.loop(5);
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
CSS wynik div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;}
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}

To Sass czy Less?

Z wielu źródeł jakie przejrzałam to uważa się iż Less jest uznawany za język łatwiejszy dla początkujących. Po język Sass sięgają osoby bardziej zaznajomione, profesjonaliści. Istnieją dwa główne powody, które rozróżniają te języki od siebie. Pierwszy to wyrażenie logiczne ‚if”, w języku Sass ten warunek jest bardziej intuicyjny i przejrzysty, natomiast w Less bardziej zagmatwany i możliwy do osiągnięcia dzięki użyciu ‚guarded mixin’. Drugi powód to pętle, w Sass mamy for, while i each, natomiast w Less pętle można uzyskać używając funkcji rekursywnych.

 

Który język natomiast ja bym wybrała? Osobiście czy Sass czy Less to nie ma dla mnie większego znaczenia. Funkcje czy pętle są przeze mnie bardzo rzadko używane, głównie może dlatego, że przy projektach z którymi mam styczność często zaopatrzone są w frameworki (np.: Bootstrap), które zawierają szereg gotowych reguł. Najważniejsze chyba aby praca z danym preprocesorem CSS była przyjemna i wydajna. A jeśli zaciekawił Cię temat frameworków front-endowych to z pewnością niebawem poruszę ten temat w jednym z kolejnych artykułów.

 

 

Źródło: http://lesscss.orghttp://webroad.pl

FacebookTwitterGoogle+LinkedIn