Ce trebuie sa tinem minte despre preprocesoarele SASS si LESS

Stefanescu Mihai 2 years ago 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!

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Iulia # 2 years ago Salut! Este util blogul si vad ca folosesti un limbaj pe intelesul tuturor. Succes!
Stefanescu Mihai # 2 years ago Mersi! Ma bucur sa aud ca imi gasesti blogul ca fiind util! Success si tie!
Razvan # 2 years ago 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
Razvan # 2 years ago 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
Preis für vancenase in München # 1 month ago Thank you for some other wonderful article. The place else could anybody get that type of information in such an ideal approach of writing? I have a presentation next week, and I am on the look for such information.
donde comprar clomifene en Ecuador # 1 month ago Heya i'm for the first time here. I found this board and I find It truly useful & it helped me out much. I hope to give something back and aid others like you helped me.
Mercedes # 3 weeks ago Hi there friends, nice piece of writing and good arguments commented at this place, I am genuinely enjoying by these.
Cortez # 2 weeks ago My brother recommended I might like this website. He was once entirely right. This put up actually made my day. You can not consider simply how much time I had spent for this information! Thanks!
Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.