CSS eelprotsessorid võrdlesid Sassit võrreldes LESS'iga
On mitmeid CSS Preprocessor, LESS, Sass, Stylus ja Swith CSS.. CSS eelprotsessor, nagu me oleme varem öelnud, on eelkõige mõeldud selleks, et muuta autoriseerimise CSS dünaamilisemaks, organiseeritumaks ja tootlikumaks. Aga, küsimus on selles, milline neist teeb tööd kõige paremini?
Noh, muidugi, me ei vaataks neid kõiki, vaid võrdleme vaid kahte populaarsemat: Sass ja LESS. Et otsustada, võrdleme neid kahte seitsmest tegurist: üks, kes teeb paremini, saab ühe punkti; võistluse korral saavad mõlemad ühe punkti.
Alustagem.
Paigaldamine
Alustame väga fundamentaalse sammuga, Paigaldamine. Nii Sass kui ka LESS on ehitatud erinevatele platvormidele, Sass töötab Ruby'l, samal ajal kui LESS on JavaScripti teek oli tegelikult ehitati ka Rubyle Esiteks).
Sass: Sass vajab töötamiseks Ruby'd, Macis on see juba eelnevalt installitud, kuid Windowsis peate selle Sassiga mängimise alustamiseks installima. Lisaks tuleb Sass paigaldada terminali või käsurea kaudu. Seal on mitu GUI-rakendust, mida saate kasutada, kuid nad ei ole tasuta.
LESS: LESS on ehitatud JavaScripti alusel, nii et LESS-i levitamine on sama lihtne kui JavaScript-raamatukogu sidumine HTML-dokumendiga. Samuti on mõned GUI-rakendused, mis aitavad LESS-i koostamisel CSS-ile ja enamik neist on tasuta ja toimivad väga hästi (nt WinLess ja LESS.app).
Järeldus: LESS on selgelt juhtpositsioonil.
Laiendused
Nii Sassil kui ka LESSil on laiendused kiiremaks ja lihtsamaks veebiarenduseks.
Sass: Meie viimases postituses olime arutanud kompassi, praeguse ja populaarse Sass-põhise laienduse üle. Kompassil on mitu Mixinsit, et kirjutada CSS3 süntaksi vähem aega.
Kuid Compass on kaugemal kui CSS3 Mixins, see on lisanud muid väga kasulikke funktsioone, nagu abilised, paigutus, tüpograafia, võrgukujundus ja isegi Sprite pildid. See on ka config.rb faili, kus me saame CSS-väljundit ja mõnda muud eelistust kontrollida. Niisiis, lühidalt öeldes, Compass on kõik-ühes pakett, mis Sassiga veebiarendust teha.
Vähem: LESSil on ka mitu laiendust, kuid erinevalt kompassist, mis vajab ühes kohas, on need eraldatud ja igaüks neist on ehitatud erinevate arendajate poolt. See ei ole probleemiks kogenud kasutajatele, kuid neile, kes alles alustavad LESSiga, peavad nad aega võtma, et valida õiged laiendused, mis sobivad nende tööprotsessiga.
Siin on mõned LESSi laiendused, mida peate oma projektis sisaldama:
- CSS3 segud: LESS Elements, Preboot, LESS Mixins.
- Võrk: 960.gs, raamita, semantiline
- Paigutus: Isegi vähem
- Muu: Twitter Bootstrap
Järeldus: Ma arvan, et peame kokku leppima, et Sass ja Compass on suurepärane duo ja Sprite pildifunktsioon on tõesti kickass, nii et üks punkt Sassile siin.
Keeled
Igal CSS Preprocessoril on oma keel ja need on enamasti tavalised. Nii Sassil kui ka LESSil on näiteks muutujad, kuid selles ei ole olulist erinevust, välja arvatud Sass määratleb muutujad koos $ märk, samas kui LESS teeb seda koos @ märk. Nad teevad ikka sama asja: salvestage püsiväärtus.
Allpool vaatleme mõningaid kõige sagedamini kasutatavaid keeli nii Sassis kui ka LESSis (minu kogemuse põhjal).
Pesitsemine
Pesastamise reegel on hea tava, et vältida valijate korduvat kirjutamist ning nii Sass kui ka LESS on pesitsuseeskirjades sama;
Sass / Scss ja LESS
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; ul polster: 0; varu: 0;
Kuid Sass / Scss võtab selle meetodi sammu edasi, võimaldades meil ka üksikute omaduste pesa, siin on näide:
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; ul polster: 0; varu: 0; piiri: style: solid; vasakule: laius: 4x; värv: # 333333; paremal: laius: 2tk; värv: # 000000;
See kood loob järgmise väljundi.
nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; piiri-stiil: tahke; vasakpoolne laius: 4x; vasakpoolne värv: # 333333; parempoolne laius: 2px; parempoolne värv: # 000000; nav ul padding: 0; varu: 0;
Järeldus: Üksikute omaduste pesitsemine on kena lisand ja seda peetakse parim harjutus, eriti kui me järgime DRY (Ärge kordage) põhimõtet. Niisiis, ma arvan, et on selge, milline on selles olukorras parem.
Mixins ja selektori pärand
Sassis ja LESSis asuvad Mixins on veidi erinevad. Sassis kasutame seda@mixin LESSis määratleme selle klassi valijaga. Siin on näide:
Sass / Scss
@mixin border-radius ($ väärtused) border-radius: $ väärtused; nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; @ sisaldab ka raadiust (10px);
Vähem
.piir (@radius) piiri-raadius: @radius; nav margin: 50px auto 0; laius: 788px; kõrgus: 45 px; .border (10px);
Sinsis ja LESSis on harjunud Mixins sisaldama omadused ühelt reeglilt teisele reeglile. Sassis kasutatakse seda meetodit edasi Valija pärand. Kontseptsioon on identne, kuid kogu omaduste kopeerimise asemel laiendab Sass valikuid, millel on samad omadused ja väärtused, kasutades @extend direktiivi.
Vaadake järgmist näidet:
.ring border: 1px solid #ccc; raadius: 50 px; ülevool: peidetud; .avatar @extend .circle;
See kood toob kaasa;
.ring, .avatar border: 1px tahke #ccc; raadius: 50 px; ülevool: peidetud;
Järeldus: Sass on üks samm edasi erinevate Mixinide ja valikute pärandiga.
Toimingud
Nii Sass kui ka LESS saavad teha põhilisi matemaatilisi toiminguid, kuid mõnikord tagastavad nad erinevad tulemused. Vaadake, kuidas nad juhuslikku arvutust teostavad:
Sass / Scss
$ margin: 10px; div marginaal: $ marginaal - 10%; / * Süntaksi viga: kokkusobimatud üksused: '%' ja 'px' * /
Vähem
@margin: 10px; div marginaal: @margin - 10%; / * = 0px * /
Järeldus: Sass teeb sel juhul seda täpsemini; kuna% ja px ei ole samaväärsed, peaks see tagastama vea. Ehk loodan, et see võib olla midagi sellist 10px - 10% = 9x.
Veateated
Veateade on oluline, et näha, mida me valesti teeme. Kujutage ette tuhandeid koodiridu ja pisut vigu natuke kaos. Selge veateade on parim viis probleemi kiiresti välja selgitada.
Sass: Selles näites kasutan kompilaatori käivitamiseks lihtsalt käsuviiba. Sass genereerib veateate, kui koodis on kehtetus. Sellisel juhul eemaldame rida 6 ühe semikooloni ja see peaks pöörduma vea juurde. Vaadake pilti allpool.
Kui ma seda teatist esimest korda nägin, siis ma vaevalt seda aru sain. Samuti tundub, et Sass on veidi veaga, kus viga on. Ta ütles, et viga on sisse lülitatud rida 7, 6 asemel.
Vähem: Sama veastsenaariumi korral on LESS-teatis rohkem esitatud ja tundub olevat täpsem. Vaadake seda pilti:
Järeldus: LESS pakub paremat kogemust selles küsimuses ja võidab käed.
Dokumentatsioon
Dokumentatsioon on iga toote jaoks väga oluline; isegi kogenud arendajatel oleks raske asju teha Dokumentatsioon.
Sass: Kui vaatame dokumentatsiooni ametlikul veebilehel, siis tunnen end isiklikult raamatukogu keskel, dokumentatsioon on väga põhjalik. Samas ei ole välimus ja tunne, kui see teile on oluline, lugemiseks motiveeriv, pluss taust on tavaline valge.
Ettekanne on palju sarnasem W3 dokumentatsioon või WikiPedia. Ma ei tea, kas see on Internetis dokumentatsiooni esitamise standard, kuid see ei ole ainus viis.
Vähem: Teisest küljest on LESS dokumentatsioon selgem ilma liiga palju teksti selgitusi andmata ja sukeldub otse näidistesse. Samuti on see hea tüpograafia ja parem värviskeem. Ma arvan, et see oli põhjus, miks LESS esmakordselt minu tähelepanu pälvis ja ma saan seda dokumentide paigutuse ja esitluse tõttu kiiremini õppida..
Järeldus: LESS dokumentatsiooni esitlus on parem, kuigi Sassil on põhjalikum dokumentatsioon, nii et ma arvan, et me võime seda siduda.
Lõplik mõte
Ma arvan, et see on selge järeldus, et Sass on parem kogupunktiga 5 versus 3 vähema eest. Kuid see ei tähenda, et LESS on halb; nad peavad lihtsalt olema paremad. Lõppkokkuvõttes on endiselt lõppkasutaja otsustada valida enda valitud eelprotsessor. Olgu see siis Sass või LESS, kui nad on mugavad ja tootlikumad, siis on see nende nimekirja võitja.
Lõpuks, kui teil on selle teema kohta midagi meeles, jagage seda allpool olevas kommentaaride kastis.
