Preprocesori CSS-a usporedili su Sass i LESS
Postoje brojni CSS Preprocessor, LESS, Sass, Stylus i Swith CSS, samo da navedemo nekoliko. CSS pretprocesor, kao što smo rekli često prije, prvenstveno je namijenjeno da autorski CSS postane dinamičniji, organiziraniji i produktivniji. Ali, pitanje je koji od njih najbolje obavlja posao?
Pa, naravno, ne bismo pogledali svaku od njih, umjesto toga usporedit ćemo samo dvije popularnije: Sass i MANJE. Da bismo odlučili, usporedit ćemo dva u sedam čimbenika: onaj koji bolje obavlja dobiva jednu točku; u slučaju izjednačenosti, oba će biti nagrađena jednim bodom.
Započnimo.
Montaža
Počnimo s vrlo temeljnim korakom, Montaža. I Sass i LESS su izgrađene na različitoj platformi, Sass radi na Ruby dok je LESS JavaScript knjižnica (koja to i čini je bio zapravo je također izgrađen na Ruby isprva).
Sass: Sassu treba Ruby kako bi mogao raditi, u Macu je to unaprijed instalirano, ali u sustavu Windows vjerojatno ga trebate instalirati prije nego počnete igrati sa Sassom. Nadalje, Sass treba instalirati putem terminala ili naredbenog retka. Postoji nekoliko GUI aplikacija koje možete koristiti na mjestu, ali nisu besplatne.
MANJE: LESS je izgrađen na JavaScript-u, tako da je intalling LESS jednostavan kao povezivanje JavaScript biblioteke s HTML dokumentom. Tu je i nekoliko GUI aplikacija koje pomažu u kompiliranju LESS-a u CSS, a većina njih je besplatna i vrlo uspješna (npr. WinLess i LESS.app).
Zaključak: LESS je očito na čelu.
Proširenja
I Sass i LESS imaju proširenja za brži i jednostavniji razvoj weba.
Sass: U našem zadnjem postu raspravljali smo o Compassu, trenutnoj i popularnoj Sass-baziranoj ekstenziji. Kompas ima više Mixinsova za pisanje CSS3 sintakse za manje vremena.
No, Compass je izvan CSS3 Mixinsa, dodao je i druge vrlo korisne značajke kao što su Helpers, Layout, Typography, Grid Layout i čak Sprite Images. Također ima config.rb gdje možemo kontrolirati izlaz CSS-a i neke druge postavke. Ukratko, Compass je sve-u-jednom paket za razvoj weba sa Sassom.
MANJE: LESS također ima nekoliko proširenja, ali za razliku od kompasa koji ima sve što nam je potrebno na jednom mjestu, oni su odvojeni i svaki od njih je izgrađen od strane različitih programera. To neće biti problem za iskusne korisnike, ali za one koji tek počinju s LESS-om, potrebno im je neko vrijeme da odaberu prave proširenja koja odgovaraju njihovom tijeku rada.
Evo nekoliko LESS ekstenzija koje ćete možda morati uključiti u svoj projekt:
- CSS3 Mixins: LESS Elementi, Preboot, LESS Mixins.
- rešetka: 960.gs, Frameless, Semantic.gs
- raspored: Čak i manje
- Razno: Twitter Bootstrap
Zaključak: Mislim da se moramo složiti da je Sass i Compass sjajan duo, a značajka Sprite slike je stvarno kickass, tako da je jedna točka za Sassa ovdje.
Jezici
Svaki CSS Preprocessor ima svoj vlastiti jezik i oni su uglavnom uobičajeni. Na primjer, i Sass i LESS imaju varijable, ali nema značajne razlike u njemu, osim što Sass definira varijable s $ potpisati dok MANJE radi s @ znak. I dalje rade istu stvar: pohraniti konstantnu vrijednost.
U nastavku ćemo ispitati neke od najčešće korištenih jezika na jeziku Sass i LESS (na temelju mog iskustva).
traženje gnijezda
Pravilo gniježđenja je dobra praksa da se izbjegava pisanje selektora više puta, a Sass i LESS imaju isti način u pravilima gniježđenja;
Sass / Scss i MANJE
nav margin: 50px auto 0; širina: 788px; visina: 45px; ul punjenje: 0; margina: 0;
Ali Sass / Scss uzima ovu metodu korak dalje dopuštajući nam da gniježemo i pojedinačna svojstva, ovdje je primjer:
nav margin: 50px auto 0; širina: 788px; visina: 45px; ul punjenje: 0; margina: 0; border: style: solid; lijevo: širina: 4px; boja: # 333333; desno: širina: 2px; boja: # 000000;
Ovaj kod će generirati sljedeće izlaze.
nav margin: 50px auto 0; širina: 788px; visina: 45px; granični stil: čvrst; granica lijevo-širina: 4px; border-left-color: # 333333; border-right-width: 2px; rubno-desno-boja: # 000000; nav ul punjenje: 0; margina: 0;
Zaključak: Gniježđenje pojedinačnih svojstava lijep je dodatak i smatra se najbolja vježba, pogotovo ako slijedimo princip SUŠI (Ne ponovi se). Dakle, mislim da je jasno koja je bolja u ovom slučaju.
Mixins i selektorsko nasljeđivanje
Mješavine u Sassu i LESSu definirane su malo drugačije. U Sassu koristimo@mixin direktiva dok je u MANJEM definiramo s selektorom klase. Evo primjera:
Sass / Scss
@mixin border-radius ($ values) granični radijus: $ vrijednosti; nav margin: 50px auto 0; širina: 788px; visina: 45px; @ uključite granični radijus (10px);
MANJE
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; širina: 788px; visina: 45px; .border (10px);
Mixins, u Sass i LESS, je naviknut uključiti svojstva iz jednog skupa pravila na drugi skup pravila. U Sassu se ova metoda dalje uzima Nasljeđivanje selektora. Koncept je identičan, ali umjesto kopiranja cijelih svojstava, Sass će proširiti ili grupirati selektore koji imaju ista svojstva i vrijednosti koristeći @extend direktiva.
Pogledajte ovaj primjer u nastavku:
.krug border: 1px solid #ccc; granični polumjer: 50px; preljev: skriven; .avatar @extend .circle;
Ovaj kod će rezultirati kao;
.krug, .avatar border: 1px solid #ccc; granični polumjer: 50px; preljev: skriven;
Zaključak: Sass je jedan korak ispred različitih Mixins i selektora nasljeđivanja.
operacije
I Sass i LESS mogu obavljati osnovne matematičke operacije, ali ponekad vraćaju različite rezultate. Pogledajte kako izvode ovaj nasumični izračun:
Sass / Scss
$ marža: 10px; div margin: $ margin - 10%; / * Pogreška u sintaksi: Nekompatibilne jedinice: '%' i 'px' * /
MANJE
@ margina: 10px; div margin: @margin - 10%; / * = 0px * /
Zaključak: Sass, u ovom slučaju, to radi točnije; kao% i px nije ekvivalentan, trebao bi vratiti pogrešku. Iako se zapravo nadam da može biti nešto slično 10px - 10% = 9px.
Obavijesti o pogreškama
Obavijest o pogrešci važna je kako biste vidjeli što radimo pogrešno. Zamislite tisuće redaka koda i malu pogrešku negdje u kaosu. Jasan obavijest o pogrešci će biti najbolji način za brzo otkrivanje problema.
Sass: U ovom primjeru samo koristim naredbeni redak za pokretanje kompilatora. Sass će generirati obavijest o pogrešci kad god kôd bude nevažeći. U tom slučaju uklonit ćemo jednu točku-zarez na liniji 6, a to bi se trebalo pretvoriti u pogrešku. Pogledajte sliku ispod.
Kad sam prvi put vidio ovu obavijest, teško sam je mogao razumjeti. Također, čini se da je Sass neznatno na mjestu gdje je pogreška. Rekao je da je pogreška uključena redak 7, umjesto 6.
MANJE: Uz isti scenarij pogreške, LESS obavijest je bolje predstavljena i čini se da je točnija. Pogledajte ovu snimku zaslona:
Zaključak: LESS donosi bolja iskustva u vezi s tim i osvaja ruke.
Dokumentacija
Dokumentacija je vrlo bitan dio svakog proizvoda; čak i iskusni programeri teško bi mogli raditi stvari bez njih Dokumentacija.
Sass: Ako pogledamo dokumentaciju na službenim stranicama, osobno se osjećam kao da sam usred knjižnice, dokumentacija je vrlo opsežna. Ipak, izgled i dojam, ako je to važno za vas, nije motivacijsko za čitanje, plus pozadina je obična bijela.
Prezentacija je mnogo više poput W3 dokumentacije ili WikiPedije. Ne znam je li to standard prikazivanja dokumentacije na Internetu, ali to nije jedini način.
MANJE: S druge strane, LESS dokumentacija je jasnija bez previše tekstualnih objašnjenja, a ona se baca ravno u primjere. Također ima dobru tipografiju i bolju shemu boja. Mislim da je zbog toga LESS privukao moju pažnju na prvo mjesto, a to mogu brže naučiti zbog izgleda i prezentacije dokumentacije.
Zaključak: LESS prezentacija dokumentacije je bolja, iako Sass ima sveobuhvatniju dokumentaciju, pa mislim da možemo nazvati ovu kravatu.
Konačna misao
Mislim da je to jasan zaključak Sass je bolji s ukupnim rezultatom 5 naspram 3 za manje. Međutim, to ne znači da je LESS loš; samo trebaju biti bolji. Na kraju, ipak je kraj odluke krajnjeg korisnika da odabere pretprocesor po svom izboru. Bilo da je Sass ili LESS, sve dok su udobni i produktivniji, onda je to pobjednik u njihovom popisu.
Konačno, ako imate nešto na umu o ovoj temi, slobodno je podijelite u okviru za komentare u nastavku.
