Ce trebuie sa tinem minte despre preprocesoarele SASS si LESS

postat acum un an de Stefanescu Mihai in categorie iNoob

Daca ai lucrat cu CSS, probabil ai auzit si de preprocesoare de CSS. Un preprocesor este un tool ce ne ajuta sa atunci cand avem de scris un fisier urias de CSS. Ne ajuta permitandu-ne sa scriem mai putin cod si cod mai usor de inteles, iar pe langa aceste lucruri ne sunt oferite diverse functionalitati ce ne vor usura viata. Aceste preprocesoare vin in plus cu mixins, variabile si diverse alte noi functionalitati.

Aceste preprocesoare compileaza fisierul SASS sau LESS intr-un nou fisier CSS. Oricum, putem alege dintre mai multe preprocesoare de CSS, dar ina cest articol am sa va vorbesc mai ales despre SASS si LESS.

Overview

Atat preprocesorul Sass cat si Less sunt compatibile cu CSS-ul normal, asta inseamnand ca iti poti converti fisierele CSS existente in Sass sau Less doar mutand continutul intr-un fisier sass sau less. Hai sa vedem cum putem folosi o variabila in Sass sau Less. Presupunem ca lucram la un proiect ce are nevoie de mai multe culori, ce iti vei aminti mai usor albastru sau #406fa9 ? Ei bine, mie imi pare ca este mai greu sa iti amintesti un cod HEX decat numele unei variabile.

$albastru: #406fa9;
$culoarecontur: #00000;
.elementulmeu{
	background: $albastru;
	border: 1px solid $culoarecontur;
}

Spre deosebire de Sass, Less foloseste @ in loc de $:

@albastru: #406fa9;
@culoarecontur: #00000;
.elementulmeu{
	background: @albastru;
	border: 1px solid @culoarecontur;
}

Sass sau Less?

1.Dezvoltare mai rapida a aplicatiilor

Atat Sass cat si Less vin cu o multime de extensii ce ne ajuta la dezvoltarea aplicatiilor intr-un mod mai simplu si mai rapid. Sass se foloseste de extensia Compass pentru dezvoltare. Aceasta extensie vine cu mai multe Mixin-uri ce ne ajuta la scrierea de CSS3 intr-un mod mai rapid. In plus, vine cu feature-uri precum Typograpgy, image Spritesm s.a.m.d ce ne ajuta la controlarea output-ului CSS. De asemenea, Less ofera destule extensii similare cu Compass.

2.Erori

Cand  lucrezi la un proiect web foarte mare, chiar si cea mai mica greseala poate crea haos. Dar daca primim o notificare ce ne anunta ca ca avem o eroare si numarul liniei ne va usura viata foarte mult. Sass ne va afisa o notificare de fiecare data cand descopera o sectiune invalida de cod.

3.Documenatatia

Sass bedeficiaza de o documentatie destul de buna, dar cand am intrat prima data incercand sa invat cate ceva despre acest preprocesor am avut impresia ca exista chestii ce lipsesc de acolo. In cazul Less, situatia sta altfel...docuemtatia este mult mai clara si mai suor de inteles.

4.Operarii de baza

Atat Sass cat si Less poate efectua operatii matetmatice de baza. Dar, ambele returneaza rezultate diferite. Hai sa va arat asta folosind 2 exemple simple:

Folosind Sass/Scss:

$margin: 12px;
div{
	margin: $margin – 12%; /*Syntax error: Incompatible units : ‘%’ and ‘px’ */
}

Folosind Less:

@margin: 12px;
div{
	margin: @margin – 12%; /* rezultatul va fi 0px */
}

Concluzii

Ambele preprocesoare sunt foarte populare si foarte folosite fiind 2 tool-uri ce ne pot usura viata ca si dezvoltatori. Desi ambele ofera mai mult sau mai putin acelasi lucru, in mod clar Sass este mai bun, dar asta nu inseamna ca Less este mai prost sau nefolositor, ci doar ca nu este mai bun ca sass.

Nu uitati sa cititi seria de articole dedicata Sass: Citreste Tutorialele!

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Comentariu postate de Iulia
Salut! Este util blogul si vad ca folosesti un limbaj pe intelesul tuturor. Succes!
Comentariu postate de Stefanescu Mihai
Mersi! Ma bucur sa aud ca imi gasesti blogul ca fiind util! Success si tie!
Comentariu postate de Razvan
Eu le-am folosit pe amandoua si mi s-au parut la fel...de ce totusi e mai bun sass nu stiu. Concluzia la fel ma lasat in ceata. Cei drept e ca less foloseam pe subline text 3 cu prepo si sass in webstorm
Comentariu postate de Razvan
Eu le-am folosit pe amandoua si mi s-au parut la fel...de ce totusi e mai bun sass nu stiu. Concluzia la fel ma lasat in ceata. Cei drept e ca less foloseam pe subline text 3 cu prepo si sass in webstorm