CSS Preprocessors palygino Sass ir LESS
Yra keletas CSS Preprocessor, LESS, Sass, Stylus ir Swith CSS.. CSS išankstinis apdorojimas, kaip jau anksčiau sakėme, visų pirma siekiama, kad autorių CSS taptų dinamiškesnė, organizuota ir produktyvesnė. Bet, kyla klausimas, kuris iš jų geriausiai atlieka darbą?
Žinoma, mes nežiūrėsime į kiekvieną iš jų, o tik palyginsime du iš populiariausių: Sass ir LESS. Norėdami nuspręsti, mes palyginsime du iš septynių veiksnių: vienas, kuris atlieka geresnį rezultatą; jei tai bus lygi, abu bus apdovanoti vienu tašku.
Pradėkime.
Diegimas
Pradėkime nuo labai esminio žingsnio, Diegimas. Tiek „Sass“, tiek „LESS“ yra pastatytos ant skirtingos platformos, „Sass“ veikia „Ruby“, o „LESS“ yra „JavaScript“ biblioteka (kurią ji naudoja buvo iš tikrųjų taip pat buvo pastatytas ant Ruby iš pradžių).
Sass: Norint dirbti, „Sass“ turi „Ruby“, o „Mac“ tai buvo iš anksto įdiegta, tačiau „Windows“ jums tikriausiai reikės ją įdiegti prieš pradėdami žaisti su „Sass“. Be to, „Sass“ reikia įdiegti per terminalą arba komandų eilutę. Yra keletas GUI programų, kurias galite naudoti vietoje, tačiau jos nėra nemokamos.
LESS: LESS yra pastatytas ant „JavaScript“, todėl intelektas „LESS“ yra toks pat lengvas, kaip „JavaScript“ bibliotekos susiejimas su HTML dokumentu. Taip pat yra keletas GUI programų, padedančių sudaryti LESS į CSS, ir dauguma jų yra nemokamos ir veikia labai gerai (pvz., „WinLess“ ir „LESS.app“).
Išvada: LESS yra aiškiai pirmaujanti.
Plėtiniai
Tiek „Sass“, tiek „LESS“ turi plėtinius, leidžiančius greičiau ir lengviau kurti internetą.
Sass: Paskutiniame pranešime aptarėme kompasą, dabartinį ir populiarų „Sass“ pagrindą. Kompasas turi keletą „Mixins“, kad būtų galima trumpiau rašyti CSS3 sintaksę.
Tačiau kompasas yra ne tik „CSS3 Mixins“, bet ir pridėjo kitas labai naudingas funkcijas, pvz., „Helpers“, „Layout“, „Typography“, „Grid Layout“ ir net „Sprite“ vaizdus. Ji taip pat turi config.rb failą, kuriame galime valdyti CSS išvestį ir kai kurias kitas nuostatas. Taigi, trumpai tariant, kompasas yra „viskas viename“ paketas, skirtas interneto kūrimui su „Sass“.
Mažiau: LESS taip pat turi kelis plėtinius, tačiau skirtingai nuo kompaso, kurio vienintelė vieta reikalinga, jie yra atskirti ir kiekvienas iš jų yra pastatytas skirtingų kūrėjų. Tai nebus problema patyrusiems naudotojams, bet tiems, kurie tik pradeda naudotis „LESS“, jiems reikia šiek tiek laiko pasirinkti tinkamus plėtinius, atitinkančius jų darbo eigą.
Štai keletas LESS plėtinių, kuriuos gali tekti įtraukti į savo projektą:
- CSS3 mišiniai: LESS Elements, Preboot, LESS Mixins.
- Tinklelis: 960.gs, be rėmelių, semantic.gs
- Išdėstymas: Dar mažiau
- Įvairūs: Twitter „Bootstrap“
Išvada: Manau, kad turime susitarti, kad „Sass“ ir „Compass“ yra puikus duetas, o „Sprite“ vaizdo funkcija yra tikrai „kickass“, todėl vienas taškas „Sass“ čia.
Kalbos
Kiekvienas CSS Preprocesorius turi savo kalbą ir dažniausiai yra paplitęs. Pavyzdžiui, tiek „Sass“, tiek „LESS“ turi kintamuosius, tačiau joje nėra reikšmingo skirtumo, išskyrus, kad „Sass“ apibrėžia kintamuosius su $ ženklas, o LESS tai daro su @ ženklas. Jie vis dar daro tą patį: išsaugoti pastovią vertę.
Toliau apžvelgsime dažniausiai vartojamas kalbas tiek „Sass“, tiek „LESS“ (remiantis mano patirtimi).
Lizdavimas
Lizdų laikymo taisyklė yra gera praktika, kad būtų išvengta pakartotinių selektorių rašymo ir tiek „Sass“, tiek „LESS“ turi tokį patį požiūrį į lizdus;
Sass / Scss ir LESS
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; ul padding: 0; marža: 0;
Tačiau „Sass / Scss“ šį metodą žengia toliau, leisdamas mums taip pat atskirti atskiras savybes, čia yra pavyzdys:
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; ul padding: 0; marža: 0; siena: style: solid; kairėje: plotis: 4px; spalva: # 333333; dešinėje: plotis: 2px; spalva: # 000000;
Šis kodas generuos tokią išvestį.
nav margin: 50px auto 0; plotis: 788px; aukštis: 45px; sienos stilius: kietas; sienos-kairysis plotis: 4px; kairė spalva: # 333333; kraštinės-dešinės pločio: 2px; dešinė-dešinė: # 000000; nav ul padding: 0; marža: 0;
Išvada: Atskirų savybių lizdas yra gražus priedas ir yra svarstomas geriausia praktika, ypač jei laikomės DRY (Don't Repeat Yourself) principo. Taigi, manau, aišku, kas šiuo atveju yra geriau.
Mixins ir selektoriaus paveldėjimas
„Sins“ ir „LESS“ mišiniai yra šiek tiek skirtingi. Sasoje mes naudojame@mixin direktyvoje, o LESS mes jį apibrėžiame su klasės parinkikliu. Štai pavyzdys:
Sass / Scss
@mixin border-radius ($ vertės) border-radius: $ vertės; nav paraštė: 50px auto 0; plotis: 788px; aukštis: 45px; @ įtraukti sienos spindulį (10px);
Mažiau
.siena (@radius) pasienio spindulys: @radius; nav paraštė: 50px auto 0; plotis: 788px; aukštis: 45px; .border (10px);
„Sins“ ir „LESS“ mišiniai yra naudojami įtraukti savybės iš vienos taisyklės į kitą. Sass'e šis metodas yra toliau taikomas Selektoriaus paveldėjimas. Koncepcija yra identiška, bet vietoj kopijavimo visos savybės, „Sass“ išplės arba grupuos pasirinktuvus, kurie turi tas pačias savybes ir vertes, naudodamiesi @extend direktyva.
Pažvelkite į šį pavyzdį:
.ratas border: 1px solid #ccc; pasienio spindulys: 50px; perteklius paslėptas; .avatar @extend .circle;
Šis kodas bus toks:
.ratas, .avatar border: 1px solid #ccc; pasienio spindulys: 50px; perteklius paslėptas;
Išvada: Sassas yra vienas žingsnis į priekį dėl skirtingų „Mixins“ ir „Selectors Inheritance“.
Operacijos
Tiek „Sass“, tiek „LESS“ gali atlikti pagrindines matematines operacijas, tačiau kartais jie grąžina skirtingus rezultatus. Peržiūrėkite, kaip jie atlieka šį atsitiktinį skaičiavimą:
Sass / Scss
$ margin: 10px; div marža: $ marža - 10%; / * Sintaksės klaida: nesuderinami vienetai: „%“ ir „px“ * /
Mažiau
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Išvada: Sassas šiuo atveju tai daro tiksliau; kadangi% ir px nėra lygiaverčiai, ji turėtų grąžinti klaidą. Nors aš tikiuosi, kad tai gali būti kažkas panašaus 10px - 10% = 9px.
Pranešimai apie klaidas
Pranešimas apie klaidą yra svarbus norint pamatyti, ką darome neteisingai. Įsivaizduokite tūkstančius kodų eilučių ir nedidelę klaidų dalį kažkur chaoso. Aišku klaidos pranešimas bus geriausias būdas greitai išsiaiškinti problemą.
Sass: Šiame pavyzdyje tiesiog naudoju komandų eilutę, kad paleistumėte kompiliatorių. „Sass“ generuos klaidos pranešimą, kai kode yra negaliojantis. Tokiu atveju 6 eilutėje pašalinsime vieną semikoloną, o tai turėtų būti klaida. Pažvelkite į žemiau pateiktą ekrano kopiją.
Kai pirmą kartą pamačiau šį pranešimą, vargu ar galėjau tai suprasti. Be to, atrodo, kad „Sass“ šiek tiek atsilieka, kur yra klaida. Ji sakė, kad klaida yra įjungta 7 eilutė, vietoj 6.
Mažiau: Naudojant tą patį klaidų scenarijų, pranešimas apie sumažėjusį pavojų (LESS) yra geriau pristatytas ir taip pat atrodo tikslesnis. Pažvelkite į šį ekraną:
Išvada: LESS suteikia geresnę patirtį šiuo klausimu ir laimi rankas.
Dokumentacija
Dokumentai yra labai svarbūs kiekvienam produktui; net patyrusiems kūrėjams būtų sunku be jokių dalykų Dokumentacija.
Sass: Jei pažiūrime dokumentaciją oficialioje svetainėje, aš asmeniškai jaučiu, kad esu bibliotekos viduryje, dokumentai yra labai išsamūs. Tačiau išvaizda ir jausmas, jei tai jums svarbu, nėra motyvacinis skaityti, o fonas yra baltas.
Pristatymas yra labiau panašus į W3 dokumentaciją arba „WikiPedia“. Nežinau, ar tai yra standartas, rodantis dokumentus internete, bet tai ne vienintelis būdas.
MažiauKita vertus, LESS dokumentai yra aiškesni, nesant per daug teksto paaiškinimų, ir jis nukelia tiesiai į pavyzdžius. Ji taip pat turi gerą tipografiją ir geresnę spalvų schemą. Manau, kad tai buvo priežastis, kodėl LESS pirmiausia pritraukė mano dėmesį, ir aš galiu jį greičiau išmokti dėl dokumentacijos išdėstymo ir pateikimo..
Išvada: LESS dokumentacijos pateikimas yra geresnis, nors „Sass“ turi išsamesnę dokumentaciją, todėl manau, kad galime tai pavadinti vienu kaklaraiščiu.
Galutinė mintis
Manau, kad tai aiški išvada, kad Sassas yra geresnis bendras balas 5 ir 3 už LESS. Tačiau tai nereiškia, kad LESS yra blogai; jie tiesiog turi būti geresni. Galų gale, vis dar priklauso galutinio vartotojo sprendimui pasirinkti savo pasirinktą išankstinį procesorių. Būkite Sass ar LESS, jei jie yra patogūs ir našesni, tai yra jų sąraše nugalėtojas.
Galiausiai, jei turite ką nors galvoti apie šį dalyką, nedvejodami pasidalinkite jame esančiame komentarų laukelyje.
