A CSS előfeldolgozók összehasonlították a Sass-ot és a LESS-et

Számos CSS Preprocessor, LESS, Sass, Stylus és Swith CSS, csak néhány nevet. CSS előfeldolgozó, amint azt már korábban is mondtuk, elsősorban a szerzői CSS dinamikusabbá, szervezettebbé és produktívabbá teszi. De, a kérdés az, hogy melyik a legjobb munkát végzi?

Hát persze, nem vesszük szemügyre mindegyiküket, hanem csak a népszerűbbek közül kettőt hasonlítunk össze: Sass és LESS. Eldönthetjük, hogy hét tényezővel hasonlítjuk össze a kettőt: az, amelyik jobban teljesít, egy pontot kap; nyakkendő esetén mindkettő egy pontot kap.

Kezdjük.

Telepítés

Kezdjük a nagyon alapvető lépéssel, Telepítés. A Sass és a LESS egy másik platformra épül, a Sass Ruby-n fut, míg a LESS egy JavaScript könyvtár (melyet a volt valójában a Ruby-ra épült először).

Sass: A Sassnak Rubyre van szüksége ahhoz, hogy működjön, Mac-ben ez már előre telepítve van, de a Windows-ban valószínűleg telepíteni kell, mielőtt elkezdené lejátszani a Sass-ot. Továbbá a Sass-ot a terminálon vagy a parancssoron keresztül kell telepíteni. Számos GUI-alkalmazás használható, de nem szabad.

KEVÉSBÉ: A LESS a JavaScript-re épül, így a LESS-nek köszönhetően ugyanolyan egyszerű, mint a JavaScript-könyvtár összekapcsolása a HTML-dokumentummal. Van néhány GUI alkalmazás is, amelyek segítenek a LESS összeállításában a CSS-nek, és legtöbbjük ingyenes és nagyon jól teljesít (pl. WinLess és LESS.app).

Következtetés: A LESS egyértelműen vezető szerepet tölt be.

Extensions

A Sass és a LESS egyaránt rendelkezik kiterjesztéssel a gyorsabb és könnyebb webfejlesztéshez.

Sass: Utolsó üzenetünkben a Compassról, a jelenlegi és a népszerű Sass-alapú kiterjesztésről beszélgettünk. Az iránytű számos Mixins-et tartalmaz a CSS3 szintaxisának kevesebb idő alatt történő írására.

A Compass azonban nem csak a CSS3 Mixins-en kívül van, hanem más hasznos funkciókat is tartalmaz, mint például a Helpers, az Layout, a Typography, a Grid Layout és a Sprite Images. Ez is van config.rb fájl, ahol vezérelhetjük a CSS kimenetet és néhány más beállítást. Röviden, a Compass egy all-in-one csomag, amely a webes fejlesztést Sass-szal teszi.

KEVÉSBÉ: A LESS-nek több kiterjesztése is van, de ellentétben az Iránytűvel, amire szükségünk van egy helyen, egymástól elkülönülnek, és mindegyiküket különböző fejlesztők építik. Ez nem jelent problémát a tapasztalt felhasználók számára, de azok számára, akik most kezdik el a LESS-et, egy kis időre van szükségük ahhoz, hogy kiválasszák a munkafolyamatuknak megfelelő bővítményeket.

Néhány LESS kiterjesztés, amelyre szükség lehet a projektben:

CSS3 Mixins: LESS Elemek, Preboot, LESS Mixins.
Rács: 960.gs, Keret nélküli, Semantic.gs
Elrendezés: Még kevesebb
Egyéb: Twitter Bootstrap

Következtetés: Azt hiszem, meg kell állapodnunk, hogy Sass és a Compass egy nagyszerű duó, és a Sprite képfunkció valóban kickass, így egy pont Sass-nak itt.

Nyelvek

Minden CSS Preprocessornak saját nyelve van, és ezek többnyire gyakoriak. Például a Sass és a LESS egyaránt rendelkezik változókkal, de nincs szignifikáns különbség benne, kivéve a Sass a változókat egy $ jel, míg a LESS ezt egy @ jel. Még mindig ugyanezt teszik: állandó értéket tárol.

Az alábbiakban néhány leggyakrabban használt nyelvet fogunk megvizsgálni mind a Sass-ban, mind a LESS-ben (tapasztalatom alapján).

fészekrakó

A fészkelési szabály jó gyakorlat, hogy elkerüljük a szelektorok többszöri írását, és Sass és a LESS egyforma a fészkelési szabályok szerint;

Sass / Scss és LESS

 nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; ul padding: 0; margin: 0;

De Sass / Scss ezt a módszert egy lépéssel tovább folytatja, mivel lehetővé teszi számunkra, hogy egyedi tulajdonságokat is fészkelhessen, itt egy példa:

 nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; ul padding: 0; margin: 0;  határ: stílus: szilárd; balra: szélesség: 4px; szín: # 333333;  jobbra: szélesség: 2px; szín: # 000000;

Ez a kód a következő kimenetet generálja.

 nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; határstílus: szilárd; határ-bal szélesség: 4px; határ-bal szín: # 333333; határ-jobb szélesség: 2px; határ-jobb szín: # 000000;  nav ul padding: 0; margin: 0;

Következtetés: Az egyes tulajdonságok beágyazása szép kiegészítés, és figyelembe véve legjobb gyakorlat, különösen, ha a DRY (Ne ismételje meg magad) elvét. Úgy gondolom tehát, hogy világos, hogy melyik a helyzet ebben az esetben.

Mixins és Selector öröklés

A Sass-ban és a LESS-ben található Mixins-eket kissé másképpen definiáljuk. Sass-ban használjuk a@mixin irányelvben, míg a LESS-ben osztályválasztóval határozzuk meg. Íme egy példa:

Sass / SCSS

 @mixin border-radius ($ értékek) border-radius: $ értékek;  nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; @tartománysugár (10px);

KEVÉSBÉ

 .határ (@radius) határ-sugár: @radius;  nav margin: 50px auto 0; szélesség: 788px; magasság: 45px; .border (10px);

A Sins-ben és a LESS-ben található Mixins-eket szokták használni tartalmaz tulajdonságok egyik szabályról egy másik szabályra. Sass-ban ez a módszer tovább folytatódik Kiválasztó öröklés. A koncepció azonos, de a teljes tulajdonságok másolása helyett a Sass kiterjeszti vagy csoportosítja azokat a szelektorokat, amelyek ugyanazokkal a tulajdonságokkal és értékekkel rendelkeznek a @extend irányelv.

Tekintse meg az alábbi példát:

 .kör border: 1px szilárd #ccc; határ-sugár: 50px; túlcsordulás: rejtett;  .avatar @extend .circle;

Ez a kód úgy fog eredményezni, mint:

 .kör, .avatar border: 1px szilárd #ccc; határ-sugár: 50px; túlcsordulás: rejtett;

Következtetés: Sass egy lépéssel előre a különféle Mixins és Selectors öröklésével.

Művelet

A Sass és a LESS is elvégezheti az alapvető matematikai műveleteket, de néha különböző eredményeket adnak vissza. Nézze meg, hogyan hajtják végre ezt a véletlen számítást:

Sass / SCSS

 $ margin: 10px; div margin: $ margin - 10%; / * Szintaxis hiba: összeférhetetlen egységek: '%' és 'px' * /

KEVÉSBÉ

 @margin: 10px; div margin: @margin - 10%; / * = 0px * /

Következtetés: Sass, ebben az esetben, pontosabban csinálja; mivel a% és a px nem egyenértékű, vissza kell adnia egy hibát. Bár valóban remélem, hogy valami hasonló lehet 10px - 10% = 9px.

Hiba értesítések

A hibaüzenet fontos annak megállapításához, hogy mit csinálunk rosszul. Képzeld el, hogy több ezer sor kódot és egy apró hiba van valahol a káoszban. Tiszta hibaüzenet a legjobb módja annak, hogy a problémát gyorsan kitaláljuk.

Sass: Ebben a példában csak a Parancssor parancsot használom a fordító futtatásához. A Sass hibaüzenetet generál, ha a kód érvénytelen. Ebben az esetben a 6-os sorban egy pontosvesszőt távolítunk el, és ez hibához vezet. Vessen egy pillantást az alábbi képernyőképre.

Amikor először láttam ezt az értesítést, alig tudtam megérteni. Úgy tűnik, hogy Sass kissé le van zárva a hibával. Azt mondta, hogy a hiba be van kapcsolva 7. sor, 6 helyett.

KEVÉSBÉ: Ugyanezen hiba-forgatókönyv esetén a LESS-értesítés jól ismert, és pontosabbnak tűnik. Nézd meg ezt a képernyőképet:

Következtetés: A LESS jobb élményt nyújt ebben a kérdésben, és nyer kezeket.

Dokumentáció

A dokumentáció minden termék esetében nagyon fontos; még a tapasztalt fejlesztők is nehezen tudnák megtenni a dolgokat Dokumentáció.

Sass: Ha megnézzük a dokumentációt a hivatalos oldalon, én személy szerint úgy érzem, hogy egy könyvtár közepén vagyok, a dokumentáció nagyon átfogó. Mégis, a megjelenés és érzés, ha ez számodra fontos, nem motiváló az olvasásra, a háttér pedig fehér.

A bemutató sokkal inkább W3 dokumentáció vagy WikiPedia. Nem tudom, hogy ez a szabvány az interneten történő dokumentáció megjelenítéséhez, de ez nem az egyetlen módja.

KEVÉSBÉMásrészről a LESS dokumentáció világosabb, anélkül, hogy túl sok szöveges magyarázat lenne, és egyenesen a példákba merül. Jó tipográfiával és jobb színsémával is rendelkezik. Úgy gondolom, hogy ez az oka annak, hogy a LESS először is felkeltette a figyelmemet, és gyorsabban tanulhatom meg a dokumentáció elrendezése és bemutatása miatt..

Következtetés: A LESS dokumentáció bemutatása jobb, bár Sassnak átfogóbb dokumentációja van, ezért úgy gondolom, hogy ezt egy döntetlennek nevezzük.

Végső gondolat

Azt hiszem, egyértelmű következtetést vontam le Sass jobb a teljes pontszám 5 versus 3 kevesebbért. Ez azonban nem jelenti azt, hogy a LESS rossz; csak jobbnak kell lenniük. Végül még mindig a végfelhasználó döntése szerint dönt, hogy kiválassza a választott előfeldolgozót. Legyen ez Sass vagy LESS, amíg azok kényelmesek és termelékenyebbek, akkor a győztes a listán.

Végül, ha van valamit a témával kapcsolatban, nyugodtan ossza meg azt az alábbi megjegyzések mezőben.