CSS preprocesory porovnané Sass vs. LESS
Existuje niekoľko CSS Preprocessor, LESS, Sass, Stylus a Swith CSS, len aby sme pomenovali niekoľko. CSS Preprocessor, ako sme už povedali predtým, je primárne určený na to, aby autorská CSS bola dynamickejšia, organizovanejšia a produktívnejšia. ale, otázkou je, ktorá z nich robí najlepšie?
No, samozrejme, nebudeme sa pozerať na každú z nich, namiesto toho porovnáme len dve z najpopulárnejších: Sass a LESS. Aby sme sa rozhodli, porovnáme ich v siedmich faktoroch: ten, ktorý hrá lepšie, dostane jeden bod; v prípade rovnosti súťaže obaja získajú jeden bod.
Poďme začať.
inštalácia
Začnime tým veľmi zásadným krokom, inštalácia. Obaja Sass a LESS sú postavené na rôznych platformách, Sass beží na Ruby, kým LESS je knižnica JavaScript (čo je bol skutočne tiež postavený na Ruby najprv).
Sass: Sass potrebuje Ruby, aby pracoval, v Mac je to predinštalované, ale v systéme Windows pravdepodobne potrebujete nainštalovať, skôr ako začnete hrať so Sassom. Okrem toho musí byť Sass nainštalovaný cez terminál alebo príkazový riadok. Existuje niekoľko aplikácií GUI, ktoré môžete použiť na mieste, ale nie sú zadarmo.
LESS: LESS je postavený na jazyku JavaScript, takže intraling LESS je rovnako jednoduché ako prepojenie knižnice JavaScript s dokumentom HTML. Existuje aj niekoľko aplikácií GUI, ktoré pomáhajú pri zostavovaní LESS na CSS a väčšina z nich je zadarmo a funguje veľmi dobre (napríklad WinLess a LESS.app).
záver: LESS je jednoznačne v čele.
rozšírenie
Sass a LESS majú rozšírenia pre rýchlejší a jednoduchší vývoj webových aplikácií.
Sass: V našom poslednom príspevku sme diskutovali o kompasu, súčasnom a populárnom rozšírení Sass. Compass má niekoľko Mixins na zápis syntaxe CSS3 za menej času.
Kompas však presahuje len CSS3 Mixins, ale pridáva ďalšie veľmi užitočné funkcie, ako napríklad Helpers, Layout, Typography, Grid Layout a dokonca aj Sprite Images. Má tiež config.rb súbor, kde môžeme ovládať výstup CSS a niektoré ďalšie preferencie. Takže, Stručne povedané, Compass je balíček typu all-in-one pre vývoj webových aplikácií so spoločnosťou Sass.
LESS: LESS má niekoľko rozšírení, ale na rozdiel od Compassu, ktorý má všetko, čo potrebujeme na jednom mieste, sú oddelené a každý z nich je postavený rôznymi vývojármi. To nebude problém pre skúsených používateľov, ale pre tých, ktorí práve začínajú s LESS, potrebuje nejaký čas na výber správnych rozšírení, ktoré vyhovujú ich pracovnému postupu.
Tu je niekoľko rozšírení Menej, ktoré možno budete musieť zahrnúť do vášho projektu:
- CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
- mriežka: 960.gs, bezrámové, sémantické
- dispozície: Dokonca aj bez
- rôzne: Twitter Bootstrap
záver: Myslím, že musíme súhlasiť Sass a Compass je skvelé duo a funkcia image Sprite je naozaj kickass, takže jeden bod pre Sass tu.
jazyky
Každý preprocesor CSS má svoj vlastný jazyk a sú väčšinou bežné. Napríklad Sass a LESS majú premenné, ale v ňom nie je žiadny významný rozdiel, s výnimkou, že Sass definuje premenné s $ podpísať, kým LESS to nie je @ podpísať. Stále robia to isté: uložiť konštantnú hodnotu.
Nižšie uvádzame niektoré z najčastejšie používaných jazykov v Sass a LESS (na základe mojej skúsenosti).
hniezdenia
Pravidlo hniezdenia je správna prax, aby sa opakovane neposkytovali selektory a ako Sass, tak LESS majú rovnaké pravidlá v pravidlách hniezdenia.
Sass / Scss a LESS
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; ul padding: 0; rozpätie: 0;
Ale Sass / Scss túto metódu urobí o krok ďalej tým, že nám dovolí aj hniezdiť jednotlivé vlastnosti, tu je príklad:
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; ul padding: 0; rozpätie: 0; ohraničenie: style: solid; vľavo: šírka: 4px; farba: # 333333; vpravo: width: 2px; farba: # 000000;
Tento kód generuje nasledujúci výstup.
Nav margin: 50px auto 0; šírka: 788px; výška: 45px; hraničný štýl: pevný; okraj-ľavá šírka: 4px; border-left-color: # 333333; okraj-pravá šírka: 2px; okraj-pravá farba: # 000000; nav ul padding: 0; rozpätie: 0;
záver: Hniezdenie jednotlivých nehnuteľností je pekný prírastok a je zvažovaný najlepší tréning, najmä ak budeme dodržiavať zásadu DRY (Do not repeat yourself). Myslím si, že je jasné, ktorý z nich je v tomto prípade lepší.
Mixiny a selektorové dedičstvo
Mixiny v Sass a LESS sú definované trochu inak. V Sass používame@mixin smernicu, zatiaľ čo v LESS ju definujeme pomocou voliča triedy. Tu je príklad:
Sass / SCSS
@mixin border-radius (hodnoty $) border-radius: $ hodnoty; nav margin: 50px auto 0; šírka: 788px; výška: 45px; @ zahŕňa okraj (10px);
LESS
.hranica (@radius) polomer okraja: @radius; nav margin: 50px auto 0; šírka: 788px; výška: 45px; .border (10px);
Mixins, v Sass a LESS, sa používa zahrnúť vlastnosti z jedného súboru pravidiel na iný súbor pravidiel. V Sass sa táto metóda ďalej zaoberá Selektorová dedičnosť. Koncept je totožný, ale namiesto kopírovania celých vlastností, Sass rozšíri alebo zoskupí selektory, ktoré majú rovnaké vlastnosti a hodnoty pomocou @extend smernice.
Pozrite si tento príklad:
.kruh border: 1px solid #ccc; polomer okrajov: 50 pixlov; pretečenie: skryté; .avatar @extend .circle;
Tento kód bude mať za následok;
.kruh, .avatar border: 1px solid #ccc; polomer okrajov: 50 pixlov; pretečenie: skryté;
záver: Sass je o krok napred odlišným Mixinom a Selector Inheritance.
operácie
Sass aj LESS môžu vykonávať základné matematické operácie, ale niekedy prinášajú rôzne výsledky. Pozrite si, ako vykonáva tento náhodný výpočet:
Sass / SCSS
$ margin: 10px; div rozpätie: $ margin - 10%; / * Chyba syntaxe: Nekompatibilné jednotky: '%' a 'px' * /
LESS
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
záver: Sass, v tomto prípade to robí presnejšie; pretože% a px nie sú ekvivalentné, mali by vrátiť chybu. Hoci skutočne dúfam, že to môže byť niečo podobné 10px - 10% = 9px.
Upozornenia na chyby
Upozornenie na chyby je dôležité, aby sme zistili, čo robíme zle. Predstavte si tisíce riadkov kódu a trochu chyby niekde v chaose. Čistý oznámenie o chybe bude najlepší spôsob, ako rýchlo zistiť problém.
Sass: V tomto príklade používam iba príkazový riadok na spustenie kompilátora. Služba Sass bude generovať oznámenie o chybe vždy, keď bude v kóde neplatné. V tomto prípade odstránime jednu bodkočiarku na riadku 6 a toto by sa malo zmeniť na chybu. Pozrite si snímku obrazovky nižšie.
Keď som prvýkrát videl toto oznámenie, ťažko som to pochopil. Tiež sa zdá, že Sass je mierne mimo kde je chyba. Povedal, že chyba je zapnutá riadok 7, namiesto 6.
LESS: Pri rovnakom chybovom scenári je oznámenie LESS lepšie prezentované a tiež sa zdá byť presnejšie. Pozrite sa na túto snímku obrazovky:
záver: LESS prináša lepšie skúsenosti s touto záležitosťou a získava ruky nadol.
dokumentácia
Dokumentácia je veľmi dôležitou súčasťou každého produktu. dokonca aj skúsení vývojári budú ťažko robiť veci bez dokumentácia.
Sass: Ak sa pozrieme na dokumentáciu na oficiálnej stránke, osobne, cítim sa, že som uprostred knižnice, dokumentácia je veľmi komplexná. Napriek tomu, vzhľad a dojem, ak to pre vás záleží, nie je motivačné pre čítanie a pozadie je obyčajne biele.
Prezentácia je oveľa podobná dokumentácii W3 alebo WikiPedia. Neviem, či je to štandard zobrazovania dokumentácie na internete, ale nie je to jediný spôsob.
LESS: Na druhej strane dokumentácia LESS je jasnejšia bez príliš veľa textových vysvetlení a ponorí sa priamo do príkladov. Má tiež dobrú typografiu a lepšiu farebnú schému. Myslím, že to bol dôvod, prečo LESS predovšetkým priťahoval moju pozornosť a môžem sa to naučiť rýchlejšie z dôvodu rozloženia a prezentácie dokumentácie.
záver: Dokumentácia LESS je lepšia, aj keď má Sass komplexnejšiu dokumentáciu, takže si myslím, že môžeme nazvať túto kravatu.
Konečná myšlienka
Myslím, že je to jasný záver Sass je lepšie s celkovým skóre 5 verzus 3 pre menej. Neznamená to však, že LESS je zlá; stačia byť lepšie. Nakoniec je stále na rozhodnutí koncového používateľa vybrať preprocesor podľa vlastného výberu. Či už je to Sass alebo menej, pokiaľ sú pohodlné a produktívnejšie, potom je to víťaz v ich zozname.
A nakoniec, ak máte na túto tému niečo na mysli, neváhajte a zdieľajte ho do poľa s poznámkami nižšie.
