Preprocesoare CSS comparativ cu Sass vs. LESS
Există un număr de CSS Preprocessor, LESS, Sass, Stylus și Swith CSS, doar pentru a numi câteva. Preprocesor CSS, așa cum am spus de multe ori înainte, este în primul rând scopul de a face autorul CSS mai dinamic, organizat și productiv. Dar, întrebarea este: care dintre ele lucrează cel mai bine?
Ei bine, bineînțeles, nu am fi aruncat o privire la fiecare dintre ei, în schimb, vom compara doar două dintre cele mai populare: Sass și mai puțin. Pentru a decide, vom compara cele două în șapte factori: cel care performează mai bine are un punct; în caz de egalitate, ambii vor primi un punct.
Sa incepem.
Instalare
Să începem cu pasul foarte fundamental, Instalare. Atât Sass, cât și LESS sunt construite pe o platformă diferită, Sass rulează pe Ruby, în timp ce LESS este o bibliotecă JavaScript (care este a fost de fapt, de asemenea, construit pe Ruby la început).
Sass: Sass are nevoie de Ruby pentru a lucra, în Mac acesta a fost preinstalat, dar în Windows probabil că trebuie să îl instalezi înainte să poți începe să te joci cu Sass. Mai mult, Sass trebuie să fie instalat prin Terminal sau Command Prompt. Există mai multe aplicații GUI pe care le puteți utiliza în loc, dar acestea nu sunt gratuite.
MAI PUȚIN: LESS este construit pe baza JavaScript-ului, deci intarirea LESS este la fel de usoara ca si legarea bibliotecii JavaScript cu documentul HTML. Există, de asemenea, câteva aplicații GUI care ajută la compilarea mai puțină a CSS-ului și majoritatea sunt gratuite și funcționează foarte bine (de exemplu, WinLess și LESS.app).
Concluzie: LESS este clar în plumb.
Extensii
Atât Sass cât și LESS au extensii pentru dezvoltarea web mai rapidă și mai ușoară.
Sass: În ultimul nostru post am discutat despre Compass, actuala și populară extensie bazată pe Sass. Compasul are un număr de Mixins pentru a scrie sintaxa CSS3 în mai puțin timp.
Dar Compass este dincolo de doar CSS3 Mixins, a adăugat alte caracteristici foarte utile, cum ar fi Helpers, Layout, Typography, Layout Grid și chiar și Sprite Images. De asemenea are config.rb fișier în care putem controla ieșirea CSS și alte preferințe. Deci, pe scurt, Compass este un pachet all-in-one pentru a face dezvoltarea web cu Sass.
MAI PUȚIN: Mai puțin are mai multe extensii, dar spre deosebire de Compass, care are tot ce avem nevoie într-un singur loc, ele sunt separate și fiecare dintre ele este construită de dezvoltatori diferiți. Aceasta nu va fi o problemă pentru utilizatorii experimentați, dar pentru cei care încep doar cu LESS, trebuie să ia ceva timp pentru a alege extensiile potrivite pentru fluxul lor de lucru.
Iată câteva extensii mai puține pe care ar trebui să le includeți în proiect:
- CSS3 Mixins: Mai putine elemente, Preboot, LESS Mixins.
- Grilă: 960.gs, Frameless, Semantic.gs
- schemă: Chiar mai puțin
- Diverse: Bootstrap de pe Twitter
Concluzie: Cred că trebuie să fim de acord că Sass și Compass sunt un duo grozav și caracteristica de imagine Sprite este într-adevăr kickass, deci un punct pentru Sass aici.
Limbile
Fiecare Preprocesor CSS are propria lor limbă și sunt în mare parte comune. De exemplu, ambele Sass și LESS au Variabile, dar nu există nici o diferență semnificativă în acesta, cu excepția faptului că Sass definește variabilele cu $ semn în timp ce LESS o face cu un @ semn. Încă mai fac același lucru: stocați o valoare constantă.
Mai jos, vom examina câteva limbi utilizate cel mai frecvent atât în Sass, cât și în LESS (pe baza experienței mele).
Nesting
Norma de nestingere este o bună practică pentru a evita scrierea selectorilor în mod repetat și atât Sass, cât și LESS au aceleași reguli de cuibărit;
Sass / Scss și mai puțin
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; ul padding: 0; marja: 0;
Dar Sass / Scss folosește această metodă un pas mai departe, permițându-ne să cuibănim și proprietățile individuale, aici este un exemplu:
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; ul padding: 0; marja: 0; margine: style: solid; stânga: width: 4px; culoare: # 333333; dreapta: width: 2px; culoare: # 000000;
Acest cod va genera următoarea ieșire.
nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; stilul frontal: solid; marginea stânga-stânga: 4px; border-left-color: # 333333; frontieră-dreapta-lățime: 2px; frontieră-dreapta-culoare: # 000000; nav ul padding: 0; marja: 0;
Concluzie: Imobilizarea proprietăților individuale este un plus frumos și este luat în considerare cea mai buna practica, mai ales dacă urmăm principiul DRY (Do not Repeat Yourself). Deci, cred că este clar cine face mai bine în acest caz.
Mixuri și moștenire selector
Amestecurile în Sass și LESS sunt definite puțin diferit. În Sass folosim@mixin în timp ce în LESS îi definesc cu selectorul de clasă. Iată un exemplu:
Sass / SCSS
@mixin raza de graniță (valori $) raza graniței: valori $; nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; @ include raza de graniță (10px);
MAI PUȚIN
.frontieră (@radius) raza de graniță: @radius; nav margine: 50px auto 0; lățime: 788px; înălțime: 45px; .border (10px);
Mixins, în Sass și LESS, este folosit pentru a include proprietăți de la un set de reguli la alt set de reguli. În Sass, această metodă este luată mai departe cu Selector de moștenire. Conceptul este identic, dar în loc să copieze întreaga proprietate, Sass va extinde sau grupa selectori care au aceleași proprietăți și valori utilizând @extinde directivă.
Aruncați o privire la acest exemplu de mai jos:
.cerc border: 1px solid #ccc; raza de graniță: 50px; overflow: ascuns; .avatar @extend .circle;
Acest cod va rezulta ca;
.cerc, .avatar border: 1px solid #ccc; raza de graniță: 50px; overflow: ascuns;
Concluzie: Sass este cu un pas înaintea distinctă a amestecurilor și selectorilor de moștenire.
Operațiuni
Atât Sass, cât și LESS pot face operații de matematică de bază, dar uneori se întorc diferite rezultate. Vedeți cum efectuează acest calcul aleatoriu:
Sass / SCSS
$ margine: 10px; div marja: $ marja - 10%; / * Eroare de sintaxă: Unități incompatibile: '%' și 'px' * /
MAI PUȚIN
@margin: 10px; div margine: @margin - 10%; / * = 0px * /
Concluzie: Sass, în acest caz, o face mai precis; deoarece valorile% și px nu sunt echivalente, ar trebui să returneze o eroare. Deși, de fapt, sper că poate fi ceva de genul 10px - 10% = 9px.
Anunțuri de eroare
Anunțarea erorilor este importantă pentru a vedea ce greșim. Imaginați-vă mii de linii de cod și un pic de eroare undeva în haos. O claritate notificare de eroare va fi cel mai bun mod de a descoperi problema rapid.
Sass: În acest exemplu, folosesc doar Command Prompt pentru a rula compilatorul. Sass va genera o notificare de eroare ori de câte ori există cod de invaliditate. În acest caz vom elimina o punct și virgulă pe linia 6, iar acest lucru ar trebui să transforme o eroare. Uitați-vă la imaginea de mai jos.
Când am văzut pentru prima oară această notificare, abia puteam să o înțeleg. De asemenea, se pare că Sass este ușor în afara unde este eroarea. Ea a spus că eroarea este pe linia 7, în loc de 6.
MAI PUȚIN: Cu același scenariu de eroare, notificarea LESS este mai bine prezentată și pare, de asemenea, mai exactă. Aruncați o privire la această captură de ecran:
Concluzie: LESS oferă o experiență mai bună în această chestiune și câștigă mâinile în jos.
Documentație
Documentația este o parte foarte importantă pentru fiecare produs; chiar și dezvoltatorii condus ar fi dificil să facă lucruri fără Documentație.
Sass: Dacă aruncăm o privire asupra documentației de pe site-ul oficial, eu personal mă simt ca și cum aș fi în mijlocul unei biblioteci, documentația este foarte cuprinzătoare. Cu toate acestea, aspectul și simțul, dacă este important pentru dvs., nu este motivațional pentru citire, plus fundalul este pur alb.
Prezentarea este mult mai mult ca documentația W3 sau WikiPedia. Nu știu dacă acesta este standardul de afișare a documentației pe Internet, dar nu este singura cale.
MAI PUȚIN: Pe de altă parte, documentația LESS este mai clară, fără prea multe explicații de text, și se scufundă direct în exemple. De asemenea, are o tipografie bună și o schemă de culori mai bună. Cred că de aceea LESS mi-a atras atenția în primul rând și o pot învăța mai repede din cauza aspectului și prezentării documentației.
Concluzie: Prezentarea documentației mai slabe este mai bună, deși Sass are o documentație mai cuprinzătoare, așa că cred că putem numi acest lucru o cravată.
Gândirea finală
Cred că este o concluzie clară că Sass e mai bine cu un scor total de 5 versus 3 pentru mai putin. Cu toate acestea, aceasta nu înseamnă că LESS este rău; ei trebuie doar să fie mai buni. În cele din urmă, decizia utilizatorului final este de a alege preprocesorul ales de el. Fie Sass sau mai puțin, atâta timp cât sunt confortabili și mai productivi, atunci acesta este câștigătorul pe lista lor.
În cele din urmă, dacă aveți în minte ceva despre acest subiect, nu ezitați să îl distribuiți în caseta de comentarii de mai jos.
