CSS Preprocessors Sass vs. LESS
Existuje několik CSS Preprocessor, LESS, Sass, Stylus a Swith CSS.. CSS Preprocessor, jak jsme již dříve často říkali, je primárně zaměřeno na to, aby autorská tvorba byla dynamičtější, organizovanější a produktivnější. Ale, otázkou je, která z nich vykonává práci nejlépe?
Samozřejmě, že bychom se nemuseli dívat na každého z nich, místo toho budeme porovnávat pouze dva z nejpopulárnějších: Sass a LESS. Abychom se mohli rozhodnout, porovnáme dva ze sedmi faktorů: ten, který vykonává lépe, získá jeden bod; v případě nerozhodného výsledku budou oběma bodům uděleny body.
Pojďme začít.
Instalace
Začněme velmi zásadním krokem, Instalace. Sass i LESS jsou postaveny na různých platformách, Sass běží na Ruby, zatímco LESS je knihovna JavaScriptu (která ji obsahuje) bylo vlastně také postavený na Ruby nejprve).
Sass: Sass potřebuje Ruby, aby mohl pracovat, v Macu to bylo předinstalované, ale v systému Windows je pravděpodobně nutné jej nainstalovat dříve, než začnete hrát se Sassem. Dále je třeba nainstalovat Sass prostřednictvím terminálu nebo příkazového řádku. Existuje několik GUI aplikací, které můžete použít na místě, ale nejsou zdarma.
MÉNĚ: LESS je postaven na JavaScriptu, takže intelektuální LESS je stejně snadné jako propojení JavaScript knihovny s vaším HTML dokumentem. Existuje také několik GUI aplikací, které pomáhají při kompilaci LESS do CSS a většina z nich je zdarma a funguje velmi dobře (např. WinLess a LESS.app).
Závěr: LESS je jednoznačně v čele.
Rozšíření
Sass i LESS mají rozšíření pro rychlejší a snadnější vývoj webu.
SassV našem posledním příspěvku jsme diskutovali o Compassu, současném a populárním rozšíření založeném na Sassu. Compass má několik Mixins psát CSS3 syntaxi v méně času.
Ale Compass je mimo CSS3 Mixins, přidal další velmi užitečné funkce, jako jsou Helpers, Layout, Typography, Grid Layout a dokonce i Sprite Images. Má také config.rb souboru, kde můžeme kontrolovat výstup CSS a některé další předvolby. Stručně řečeno, Compass je all-in-one balíček pro vývoj webových aplikací se Sassem.
MÉNĚ: LESS má také několik rozšíření, ale na rozdíl od kompasu, který potřebujeme na jednom místě, jsou oddělené a každý z nich je postaven různými vývojáři. To nebude problém pro zkušené uživatele, ale pro ty, kteří právě začínají s LESS, potřebují nějaký čas, aby si vybrali správná rozšíření, která vyhovují jejich pracovnímu postupu..
Zde je několik LESS rozšíření, která budete muset zahrnout do projektu:
- CSS3 Mixiny: LESS Elements, Preboot, LESS Mixins.
- Mřížka: 960.gs, Bezrámový, Semantic.gs
- Rozložení: Even.less
- Různé: Twitter Bootstrap
Závěr: Myslím, že musíme souhlasit s tím, že Sass a Compass jsou skvělé duo a obrazový prvek Sprite je opravdu kickass, takže jeden bod pro Sass zde.
Jazyky
Každý CSS Preprocessor má svůj vlastní jazyk a většinou je to společný. Například Sass i LESS má proměnné, ale v tom není žádný významný rozdíl, kromě Sass definuje proměnné s $ podepsat, zatímco LESS to s @ podepsat. Stále dělají totéž: uložit konstantní hodnotu.
Níže budeme zkoumat některé z nejčastěji používaných jazyků v jazyce Sass a LESS (na základě mých zkušeností).
Hnízdění
Pravidlo hnízdění je dobrou praxí, aby se opakovaně vyhýbali psacím selektorům a Sass i LESS mají v pravidlech hnízdění stejný způsob;
Sass / Scss a LESS
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; ul padding: 0; marže: 0;
Ale Sass / Scss tuto metodu posouvá o krok dále tím, že nám umožňuje také vnořit jednotlivé vlastnosti, zde je příklad:
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; ul padding: 0; marže: 0; border: style: solid; vlevo: width: 4px; barva: # 333333; right: width: 2px; barva: # 000000;
Tento kód vygeneruje následující výstup.
nav okraj: 50px auto 0; šířka: 788px; výška: 45px; hraniční styl: pevná; border-left-width: 4px; okrajová barva vlevo: # 333333; border-right-width: 2px; barva napravo: # 000000; nav ul padding: 0; marže: 0;
Závěr: Vkládání jednotlivých vlastností je pěkným doplňkem a je zvažováno nejlepší praxe, zejména pokud dodržujeme zásadu DRY (Don't Repeat Yourself). Domnívám se tedy, že je jasné, který z nich v tomto případě dělá lépe.
Mixiny a Selector Inheritance
Mixiny v Sass a LESS jsou definovány trochu jinak. V Sassu používáme@ mixin směrnici, zatímco v LESS ji definujeme s voličem třídy. Zde je příklad:
Sass / Scss
@mixin border-radius (hodnoty $) border-radius: $ values; nav okraj: 50px auto 0; šířka: 788px; výška: 45px; @ zahrnout hraniční rádius (10px);
MÉNĚ
.border (@radius) border-radius: @radius; nav okraj: 50px auto 0; šířka: 788px; výška: 45px; .border (10px);
Mixiny, v Sass a LESS, jsou zvyklí zahrnout z jedné sady pravidel na jinou sadu pravidel. V Sassu je tato metoda dále převzata Výběr dědičnosti. Koncept je identický, ale místo kopírování celých vlastností Sass rozšíří nebo seskupí voliče, které mají stejné vlastnosti a hodnoty pomocí @rozšířit směrnice.
Podívejte se na tento příklad níže:
.circle border: 1px pevná #ccc; hraniční hrana: 50px; přetečení: skryté; .avatar @extend .circle;
Výsledkem tohoto kódu bude;
.kruh, .avatar hranice: 1px pevná #ccc; hraniční hrana: 50px; přetečení: skryté;
Závěr: Sass je o jeden krok vpřed odlišným dědictvím Mixins a Selectors.
Operace
Sass i LESS mohou provádět základní matematické operace, ale někdy se vrátí k různým výsledkům. Podívejte se, jak provádějí tento náhodný výpočet:
Sass / Scss
$ margin: 10px; div marže: marže $ - 10%; / * Chyba syntaxe: nekompatibilní jednotky: '%' a 'px' * /
MÉNĚ
@margin: 10px; div marže: @ margin - 10%; / * = 0px * /
Závěr: Sass, v tomto případě to dělá přesněji; protože% a px není ekvivalentní, měla by vrátit chybu. I když doufám, že to může být něco jako 10px - 10% = 9px.
Chybová hlášení
Chybové oznámení je důležité, abyste zjistili, co děláme špatně. Představte si tisíce řádků kódu a malý kousek chyby někde v chaosu. Čistý oznámení o chybě bude nejlepší způsob, jak problém rychle zjistit.
Sass: V tomto příkladu používám příkazový řádek ke spuštění kompilátoru. Sass vygeneruje oznámení o chybě vždy, když je v kódu neplatnost. V tomto případě odstraníme jeden řádek na řádku 6 a to by se mělo obrátit na chybu. Podívejte se na níže uvedený snímek.
Když jsem poprvé viděl toto oznámení, těžko jsem to pochopil. Také se zdá, že Sass je mírně mimo, kde je chyba. Říká se, že chyba je zapnutá řádek 7, místo 6.
MÉNĚ: Se stejným scénářem chyb je oznámení LESS prezentováno lépe a je také přesnější. Podívejte se na tuto screenshot:
Závěr: LESS přináší lepší zkušenosti v této věci a vyhrává ruce dolů.
Dokumentace
Dokumentace je velmi důležitou součástí každého výrobku; Dokonce i ostřílení vývojáři by měli obtížné dělat věci bez Dokumentace.
SassPokud se podíváme na dokumentaci na oficiálních stránkách, já osobně mám pocit, že jsem uprostřed knihovny, dokumentace je velmi komplexní. Nicméně vzhled a dojem, pokud je to pro vás důležité, není motivační pro čtení a pozadí je prosté bílé.
Prezentace je mnohem více jako W3 dokumentace nebo WikiPedia. Nevím, jestli je to standard zobrazování dokumentace na internetu, ale není to jediný způsob.
MÉNĚNa druhé straně je LESS dokumentace jasnější bez přílišného vysvětlení textu a ponoří se přímo do příkladů. Má také dobrou typografii a lepší barevné schéma. Myslím, že to bylo důvod, proč mě LESS zaujala v první řadě a mohu se to naučit rychleji díky uspořádání a prezentaci dokumentace.
Závěr: Prezentace LESS dokumentace je lepší, i když Sass má rozsáhlejší dokumentaci, takže si myslím, že to můžeme nazvat kravatou.
Závěrečná myšlenka
Myslím, že je to jasný závěr Sass je lepší s celkovým skóre 5 versus 3 pro méně. Neznamená to však, že LESS je špatné; prostě musí být lepší. Nakonec je stále na rozhodnutí koncového uživatele vybrat si preprocesor podle svého výběru. Ať už je to Sass nebo LESS, pokud jsou pohodlné a produktivnější, pak je v jejich seznamu vítěz.
A konečně, pokud máte na mysli toto téma, neváhejte se o něj podělit v poli pro komentáře níže.
