Preprocesorji CSS primerjajo Sass vs LESS
Obstajajo številni predprocesorji CSS, LESS, Sass, Stylus in Swith CSS.. Preprocesor CSS, kot smo že rekli že prej, je v prvi vrsti namenjeno, da bo CSS za avtoring bolj dinamičen, organiziran in produktiven. Toda, vprašanje je, katera izmed njih najbolje opravi delo?
No, seveda, ne bi gledali na vsakega od njih, ampak bomo primerjali le dva izmed bolj priljubljenih: Sass in MANJ. Za odločitev bomo primerjali dva v sedmih dejavnikih: tisti, ki bolje opravi, dobi eno točko; V primeru neodločenega izenačevanja bodo oba prejela eno točko.
Začnimo.
Namestitev
Začnimo s temeljnim korakom, Namestitev. Oba Sass in LESS sta zgrajena na različni platformi, Sass teče na Ruby, LESS pa je JavaScript knjižnica (ki jo uporablja) je bil dejansko zgrajena tudi na Ruby najprej).
Sass: Sass potrebuje Ruby, da bi lahko delal, v Macu je bilo to že vnaprej nameščeno, v operacijskem sistemu Windows pa ga boste verjetno morali namestiti, preden boste lahko začeli igrati s Sassom. Poleg tega mora biti Sass nameščen prek terminala ali ukaznega poziva. Obstaja več aplikacij GUI, ki jih lahko uporabljate, vendar niso brezplačne.
MANJ: LESS je zgrajen na JavaScriptu, zato je intalling LESS enostaven kot povezovanje knjižnice JavaScript v vaš HTML dokument. Obstaja tudi nekaj aplikacij GUI za pomoč pri prevajanju LESS v CSS in večina od njih je brezplačna in deluje zelo dobro (npr. WinLess in LESS.app).
Zaključek: LESS je očitno v vodstvu.
Razširitve
Tako Sass kot LESS imajo razširitve za hitrejši in lažji razvoj spletnih strani.
Sass: V zadnji objavi smo razpravljali o Compassu, trenutni in priljubljeni Sassovi podaljški. Kompas ima več Mixins za pisanje sintakse CSS3 v krajšem času.
Ampak Compass je zunaj le CSS3 Mixins, je dodal druge zelo koristne funkcije, kot so Helpers, Layout, tipografija, Grid Layout in celo Sprite Slike. Prav tako ima config.rb datoteko, kjer lahko nadzorujemo izhod CSS in nekatere druge nastavitve. Skratka, Compass je vse-v-enem paket za razvoj spletnih strani s Sassom.
MANJ: LESS ima tudi več razširitev, toda za razliko od kompasa, ki ima vse, kar potrebujemo na enem mestu, so ločeni in vsaka je zgrajena z različnimi razvijalci. Za izkušene uporabnike to ne bo problem, toda za tiste, ki šele začenjajo s programom LESS, potrebujejo nekaj časa, da izberejo prave razširitve, ki ustrezajo njihovemu delovnemu toku..
Tu je nekaj razširitev LESS, ki jih boste morda morali vključiti v svoj projekt:
- CSS3 Mixins: LESS Elementi, Preboot, LESS Mixins.
- Mreža: 960.gs, Frameless, Semantic.gs
- Postavitev: Še manj
- Razno: Twitter Bootstrap
Zaključek: Mislim, da se moramo strinjati, da je Sass in Compass odličen duo, Spriteova slika pa je resnično kickass, zato je ena točka za Sassa tukaj.
Jeziki
Vsak predprocesor CSS ima svoj jezik in so večinoma običajni. Na primer, Sass in LESS imata spremenljivke, vendar v njem ni bistvene razlike, razen Sass definira spremenljivke z $ znak, medtem ko MANJ to počne z @ znak. Še vedno delajo isto stvar: shranite konstantno vrednost.
Spodaj bomo preučili nekatere najpogosteje uporabljene jezike v jeziku Sass in LESS (glede na moje izkušnje).
Gnezdenje
Pravilo gnezdenja je dobra praksa, da se izogibate večkratnemu pisanju selektorjev, tako da imajo Sass in LESS enake načine pri pravilih gnezdenja;
Sass / Scss in MANJ
nav margin: 50px auto 0; širina: 788px; višina: 45px; ul polnilo: 0; margin: 0;
Toda Sass / Scss je ta metoda korak naprej, tako da nam omogoča tudi gnezdenje posameznih lastnosti, tukaj je primer:
nav margin: 50px auto 0; širina: 788px; višina: 45px; ul polnilo: 0; margin: 0; border: style: solid; levo: širina: 4px; barva: # 333333; desno: širina: 2px; barva: # 000000;
Ta koda bo ustvarila naslednje rezultate.
nav margin: 50px auto 0; širina: 788px; višina: 45px; mejni slog: trdna; širina meje levo: 4px; border-left-color: # 333333; border-right-width: 2px; mejna desna barva: # 000000; nav ul padding: 0; margin: 0;
Zaključek: Gnezdenje posameznih lastnosti je lep dodatek in se upošteva najboljša vaja, še posebej, če sledimo načelu DRY (Ne ponovi se). Zato mislim, da je jasno, kateri je v tem primeru uspešnejši.
Mixins in selektorsko dedovanje
Mešanice v Sass in LESS so nekoliko drugačne. V Sassu uporabljamo@mixin direktiva, medtem ko v LESS definiramo z izbirnikom razreda. Tukaj je primer:
Sass / Scss
@mixin border-radius ($ vrednost) border-radius: $ values; nav margin: 50px auto 0; širina: 788px; višina: 45px; @ vključi obmejni polmer (10px);
MANJ
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; širina: 788px; višina: 45px; .border (10px);
Mixins, v Sass in LESS, se uporablja za vključujejo lastnosti iz enega na drugi nabor pravil. V Sassu se ta metoda nadaljuje Selector dedovanje. Koncept je enak, vendar namesto kopiranja celotnih lastnosti bo Sass razširil ali združil selektorje, ki imajo enake lastnosti in vrednosti z uporabo @extend direktive.
Oglejte si ta primer spodaj:
.krog border: 1px solid #ccc; obrobni polmer: 50px; overflow: hidden; .avatar @extend .circle;
Ta koda bo nastala kot;
.krog, .avatar border: 1px solid #ccc; obrobni polmer: 50px; overflow: hidden;
Zaključek: Sass je korak naprej za različnimi Mixins in Selectors Inheritance.
Operacije
Tako Sass kot LESS lahko opravljata osnovne matematične operacije, včasih pa dobijo različne rezultate. Oglejte si, kako izvajajo ta naključni izračun:
Sass / Scss
$ margin: 10px; div margin: $ margin - 10%; / * Napaka v sintaksi: Nezdružljive enote: '%' in 'px' * /
MANJ
@ margin: 10px; div margin: @margin - 10%; / * = 0px * /
Zaključek: Sass, v tem primeru to počne natančneje; kot% in px ni enakovredna, mora vrniti napako. Čeprav upam, da je lahko nekaj podobnega 10px - 10% = 9px.
Obvestila o napakah
Obvestilo o napakah je pomembno, da vidite, kaj delamo narobe. Predstavljajte si tisoče vrstic kode in majhen del napake nekje v kaosu. Jasno obvestilo o napaki bo najboljši način, da hitro ugotovimo težavo.
Sass: V tem primeru uporabljam ukazni poziv za zagon prevajalnika. Sass bo ustvaril obvestilo o napaki, ko bo koda neveljavna. V tem primeru bomo v vrstici 6 odstranili eno podpičje, kar se bo spremenilo v napako. Oglejte si spodnji posnetek zaslona.
Ko sem prvič videl to obvestilo, sem ga komaj razumel. Prav tako se zdi, da je Sass nekoliko odmaknjen od tega, kje je napaka. Rekla je, da je napaka vklopljena vrstica 7, namesto 6.
MANJ: Z enakim scenarijem napak je LESS obvestilo bolje predstavljeno in se zdi tudi bolj natančno. Oglejte si ta posnetek zaslona:
Sklep: LESS prinaša boljše izkušnje o tej zadevi in zmaguje.
Dokumentacija
Dokumentacija je zelo pomemben del za vsak izdelek; celo izkušenim razvijalcem bi bilo težko brez stvari Dokumentacija.
Sass: Če pogledamo dokumentacijo na uradni strani, se osebno počutim, kot da sem sredi knjižnice, dokumentacija je zelo obsežna. Vendar pa videz in občutek, če je to pomembno za vas, ni motivacijsko za branje, poleg tega je ozadje čisto belo.
Predstavitev je bolj podobna dokumentaciji W3 ali WikiPediji. Ne vem, če je to standard prikazovanja dokumentacije na internetu, vendar to ni edini način.
MANJ: Po drugi strani pa je dokumentacija MANJŠA jasnejša, brez preveč besedilnih pojasnil, in se potopi naravnost v primere. Prav tako ima dobro tipografijo in boljšo barvno shemo. Mislim, da je zato LESS na prvem mestu pritegnil mojo pozornost in se lahko hitreje naučim zaradi postavitve in predstavitve dokumentacije..
Zaključek: Predstavitev LESS dokumentacije je boljša, čeprav ima Sass obsežnejšo dokumentacijo, zato mislim, da jo lahko imenujemo kravata.
Končna misel
Mislim, da je to jasen zaključek Sass je boljši s skupno oceno 5 proti 3 za LESS. Vendar to ne pomeni, da je LESS slab; samo morajo biti boljši. Na koncu je še vedno odločitev končnega uporabnika, da izbere predprocesor po svoji izbiri. Naj bo to Sass ali LESS, dokler so udobne in bolj produktivne, potem je to zmagovalec na njihovem seznamu.
Nazadnje, če imate v mislih o tej temi, jo lahko delite v spodnjem polju za komentarje.
