CSS Preprocessors salīdzināja Sass pret LESS
Ir vairāki CSS Preprocessor, LESS, Sass, Stylus un Swith CSS, lai nosauktu tikai dažus. CSS priekšprocesors, kā mēs jau iepriekš teicām, pirmkārt, ir paredzēts, lai autorēšanas CSS padarītu dinamiskāku, organizētāku un produktīvāku. Bet, jautājums ir, kurš no viņiem vislabāk strādā?
Protams, mēs neuzskatīsim katru no tiem, bet mēs salīdzināsim tikai divus no populārākajiem: Sass un LESS. Lai izlemtu, mēs salīdzināsim divus no septiņiem faktoriem: viens, kas veic labāk, ir viens punkts; ja tie ir vienādi, abiem tiks piešķirts viens punkts.
Sāksim.
Uzstādīšana
Sāksim ar ļoti būtisko soli, Uzstādīšana. Gan Sass, gan LESS ir veidotas uz atšķirīgas platformas, Sass darbojas Ruby, bet LESS ir JavaScript bibliotēka (kuru tā izmanto bija faktiski arī uz Ruby bāzes vispirms).
Sass: Lai Sass varētu strādāt, Sass ir nepieciešams Ruby, Mac tas jau ir iepriekš instalēts, bet Windows jums, iespējams, ir jāinstalē, pirms varat sākt spēlēt ar Sass. Turklāt Sass ir jāinstalē caur terminālu vai komandu uzvedni. Ir vairākas GUI lietojumprogrammas, kuras var izmantot, bet tās nav bezmaksas.
LESS: LESS ir balstīta uz JavaScript, tāpēc LESS ir tikpat vienkārša kā JavaScript bibliotēkas savienošana ar HTML dokumentu. Ir arī dažas GUI lietojumprogrammas, lai palīdzētu apkopot LESS uz CSS, un lielākā daļa no tām ir bezmaksas un darbojas ļoti labi (piemēram, WinLess un LESS.app).
Secinājums: LESS ir acīmredzami vadībā.
Paplašinājumi
Gan Sass, gan LESS ir paplašinājumi ātrākai un vieglākai tīmekļa izstrādei.
Sass: Mūsu pēdējā ziņojumā mēs esam apsprieduši par kompasu, pašreizējo un populāro Sass balstītu paplašinājumu. Kompasam ir vairāki Mixins, lai īsākā laikā rakstītu CSS3 sintaksi.
Bet kompass ir ārpus CSS3 Mixins, tas ir pievienojis citas ļoti noderīgas funkcijas, piemēram, palīgierīces, izkārtojums, tipogrāfija, režģa izkārtojums un pat Sprite attēli. Tas arī ir config.rb failu, kur mēs varam kontrolēt CSS izvadi un dažas citas preferences. Tātad, īsi sakot, kompass ir universāla pakete, lai veiktu tīmekļa attīstību ar Sass.
LESS: LESS ir arī vairāki paplašinājumi, taču atšķirībā no kompasas, kas vienuviet ir viss, kas ir nepieciešams, tie tiek atdalīti, un katrs no tiem ir veidots dažādu izstrādātāju. Tas nebūs problēma pieredzējušiem lietotājiem, bet tiem, kas tikko sākas ar LESS, viņiem ir nepieciešams laiks, lai izvēlētos pareizos paplašinājumus, kas atbilst viņu darbplūsmai.
Šeit ir daži LESS paplašinājumi, kas, iespējams, būs jāiekļauj jūsu projektā:
- CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
- Režģis: 960.gs, bezrāmju, Semantic.gs
- Izkārtojums: Pat mazāk
- Dažādi: Čivināt Bootstrap
Secinājums: Es domāju, ka mums ir jāvienojas par Sass un Compass ir lielisks duets, un Sprite attēla funkcija ir patiešām kickass, tāpēc viens punkts Sass šeit.
Valodas
Katram CSS priekšprocesoram ir sava valoda, un tie parasti ir izplatīti. Piemēram, gan Sass, gan LESS ir mainīgie, bet tajā nav būtiskas atšķirības, izņemot Sass definē mainīgos ar $ zīme, kamēr LESS to dara ar @ zīme. Viņi joprojām dara to pašu: saglabāt nemainīgu vērtību.
Tālāk mēs izskatīsim dažas no visbiežāk lietotajām valodām gan Sass, gan LESS (pamatojoties uz manu pieredzi).
Ligzdošana
Ligzdošanas noteikums ir laba prakse, lai izvairītos no atkārtotu selektoru rakstīšanas, un gan Sass, gan LESS ir tādi paši kā ligzdošanas noteikumi;
Sass / Scss un LESS
nav margin: 50px auto 0; platums: 788px; augstums: 45px; ul polsterējums: 0; starpība: 0;
Bet Sass / Scss izmanto šo metodi soli tālāk, ļaujot mums arī novietot atsevišķas īpašības, šeit ir piemērs:
nav margin: 50px auto 0; platums: 788px; augstums: 45px; ul polsterējums: 0; starpība: 0; robeža: style: solid; pa kreisi: platums: 4px; krāsa: # 333333; pa labi: platums: 2px; krāsa: # 000000;
Šis kods radīs šādu izeju.
nav margin: 50px auto 0; platums: 788px; augstums: 45px; robežu stils: ciets; malas-kreisās platums: 4px; kreisā krāsa: # 333333; robežu labais platums: 2px; robežu labā krāsa: # 000000; nav ul polsterējums: 0; starpība: 0;
Secinājums: Atsevišķu īpašību ligzdošana ir jauks papildinājums un tiek uzskatīts labākā prakse, it īpaši, ja mēs ievērojam DRY (Don't Repeat Yourself) principu. Tātad, es domāju, ka ir skaidrs, kurš šajā gadījumā ir labāk.
Mixins un selektora mantojums
Sins un LESS Mixins tiek definēti nedaudz atšķirīgi. Sassā mēs izmantojam@mixin direktīvā, kamēr LESS mēs to definējam ar klases selektoru. Šeit ir piemērs:
Sass / Scss
@mixin border-radius ($ vērtības) border-radius: $ vērtības; nav starpība: 50px auto 0; platums: 788px; augstums: 45px; @ ietver robežu rādiusu (10px);
LESS
.robeža (@radius) robežu rādiuss: @radius; nav starpība: 50px auto 0; platums: 788px; augstums: 45px; .border (10px);
Jaukti, kas ir Sass un LESS, ir pieraduši ietver īpašības no viena likuma uz citu likumu. Sassā šī metode turpinās Selektora mantojums. Koncepcija ir identiska, bet tā vietā, lai kopētu visas īpašības, Sass paplašinās vai sagrupēs selektorus, kuriem ir tādas pašas īpašības un vērtības, izmantojot @extend direktīvu.
Apskatiet šo piemēru:
.aplis robeža: 1px cietais #ccc; robežu rādiuss: 50px; pārplūde: slēpta; .avatar @extend .circle;
Šis kods tiks iegūts kā;
.aplis, .avatar border: 1px ciets #ccc; robežu rādiuss: 50px; pārplūde: slēpta;
Secinājums: Sass ir viens solis uz priekšu ar atšķirīgiem Mixins un selektoru mantojumiem.
Darbības
Gan Sass, gan LESS var veikt matemātikas pamatdarbības, taču dažreiz tie atgriež dažādus rezultātus. Skatiet, kā viņi veic šo nejaušo aprēķinu:
Sass / Scss
$ margin: 10px; div starpība: $ marža - 10%; / * Sintakses kļūda: nesaderīgas vienības: '%' un 'px' * /
LESS
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Secinājums: Sass, šajā gadījumā, dara to precīzāk; jo% un px nav ekvivalenti, tai jāatgriežas pie kļūdas. Lai gan, es patiešām ceru, ka tā var būt kaut kas līdzīgs 10px - 10% = 9px.
Kļūdu paziņojumi
Kļūdu paziņošana ir svarīga, lai redzētu, ko mēs darām nepareizi. Iedomājieties tūkstošiem koda rindu un nelielu kļūdu kaut kur haoss. Skaidrs kļūdas paziņojums būs labākais veids, kā ātri izprast problēmu.
Sass: Šajā piemērā es tikai izmantoju komandu uzvedni, lai palaistu kompilatoru. Sass ģenerēs kļūdas paziņojumu, ja kodā būs spēkā neesamība. Šādā gadījumā 6 rindiņā noņemsim vienu semikolu, un tam jākļūst par kļūdu. Apskatiet tālāk redzamo ekrānuzņēmumu.
Kad es pirmo reizi redzēju šo paziņojumu, to diez vai sapratu. Tāpat šķiet, ka Sass ir nedaudz izslēgts, kur ir kļūda. Tā teica, ka kļūda ir ieslēgta 7. līnija, 6 vietā.
LESS: Ar to pašu kļūdas scenāriju LESS paziņojums ir vairāk pasniegts un arī šķiet precīzāks. Apskatiet šo ekrānuzņēmumu:
Secinājums: LESS sniedz labāku pieredzi šajā jautājumā un uzvar rokās.
Dokumentācija
Dokumentācija ir ļoti svarīga katram produktam; pat pieredzējušiem izstrādātājiem būtu grūti darīt lietas Dokumentācija.
Sass: Ja mēs apskatām dokumentāciju oficiālajā vietnē, es personīgi jūtos kā bibliotēkas centrā, dokumentācija ir ļoti visaptveroša. Tomēr izskats un sajūta, ja tas jums ir svarīgi, nav motivējošs lasīšanai, un fons ir balts.
Prezentācija ir daudz vairāk kā W3 dokumentācija vai WikiPedia. Es nezinu, vai tas ir standarts dokumentācijas demonstrēšanai internetā, bet tas nav vienīgais veids.
LESSNo otras puses, LESS dokumentācija ir skaidrāks, ja nav pārāk daudz teksta skaidrojumu, un tā iegremdē tieši piemēros. Tam ir arī laba tipogrāfija un labāka krāsu shēma. Es domāju, ka tas bija iemesls, kāpēc LESS vispirms piesaistīja manu uzmanību, un es varu to ātrāk apgūt, pateicoties dokumentācijas izkārtojumam un noformējumam..
Secinājums: LESS dokumentācijas prezentācija ir labāka, lai gan Sass ir visaptverošāka dokumentācija, tāpēc es domāju, ka mēs to varam saukt par vienu.
Galīgā doma
Es domāju, ka tas ir skaidrs secinājums, ka Sass ir labāks ar kopējo punktu skaitu 5 pret 3 par LESS. Tomēr tas nenozīmē, ka LESS ir slikts; viņiem vienkārši ir jābūt labākiem. Galu galā, tas joprojām ir atkarīgs no gala lietotāja lēmuma izvēlēties priekšatlasītāju pēc savas izvēles. Vai tas būtu Sass vai LESS, ja vien tie ir ērti un produktīvāki, tad tas ir uzvarētājs savā sarakstā.
Visbeidzot, ja jums ir kaut kas prātā par šo tēmu, lūdzu, dalieties tajā tālāk esošajā komentāru ailē.
