CSS Preprocessors Sammenlignet Sass vs MINDRE
Det finnes en rekke CSS Preprocessor, LESS, Sass, Stylus og Swith CSS, bare for å nevne noen få. CSS Preprocessor, som vi ofte har sagt, er primært ment å gjøre CSS mer dynamisk, organisert og produktiv. Men, Spørsmålet er, hvilken av dem gjør jobben best?
Vel, selvfølgelig, ville vi ikke ta en titt på hver enkelt av dem, i stedet vil vi bare sammenligne to av de mer populære: Sass og mindre. Å bestemme, vi vil sammenligne de to i syv faktorer: den som utfører bedre får ett poeng; I tilfelle uavgjort vil begge bli tildelt ett poeng.
La oss begynne.
Installasjon
La oss starte med det svært grunnleggende trinnet, Installasjon. Både Sass og LESS er bygget på annen plattform, Sass kjører på Ruby mens MINDRE er et JavaScript-bibliotek (som det var faktisk også bygget på Ruby først).
Sass: Sass trenger Ruby for å kunne jobbe, i Mac har dette blitt forhåndsinstallert, men i Windows må du sannsynligvis få den installert før du kan begynne å spille med Sass. Videre må Sass installeres via Terminal eller Command Prompt. Det er flere GUI-applikasjoner du kan bruke på plass, men de er ikke gratis.
MINDRE: MINDRE er bygget på JavaScript, så intalling MINDRE er like enkelt som å koble JavaScript-bibliotek til HTML-dokumentet ditt. Det er også noen få GUI-applikasjoner som hjelper til med å samle LESS til CSS, og de fleste er gratis og fungerer veldig bra (for eksempel WinLess og LESS.app).
Konklusjon: MINDRE er tydelig i spissen.
utvidelser
Både Sass og LESS har utvidelser for raskere og enklere webutvikling.
sass: I vårt siste innlegg hadde vi diskutert om Compass, den nåværende og populære Sass-baserte utvidelsen. Kompass har en rekke Mixins å skrive CSS3 syntaks på kort tid.
Men Compass er bare CSS3 Mixins, den har lagt til andre svært nyttige funksjoner som Hjelpere, Layout, Typografi, Grid Layout og til og med Sprite Images. Den har også config.rb fil der vi kan kontrollere CSS-utgangen og noen andre preferanser. Så kort sagt, er Compass en alt-i-ett-pakke for å gjøre webutvikling med Sass.
MINDRE: LESS har også flere utvidelser, men i motsetning til Compass som har alt vi trenger på ett sted, er de skilt og hver av dem er bygget av forskjellige utviklere. Dette vil ikke være et problem for erfarne brukere, men for de som nettopp har startet med MINDRE, må de ta litt tid å velge de riktige utvidelsene som passer deres arbeidsflyt.
Her er noen få mindre utvidelser som du kanskje trenger å inkludere i prosjektet ditt:
- CSS3 Mixins: MINDRE Elementer, Preboot, Mindre Mixins.
- Nett: 960.gs, Frameless, Semantic.gs
- Oppsett: Enda mindre
- Diverse: Twitter Bootstrap
Konklusjon: Jeg tror vi må være enige Sass og Compass er en flott duo, og Sprite-bildefunksjonen er virkelig kickass, så et poeng for Sass her.
språk
Hver CSS Preprocessor har sitt eget språk og de er mest vanlige. For eksempel har både Sass og LESS variabler, men det er ingen signifikant forskjell i det, bortsett fra at Sass definerer variabler med en $ signere mens mindre gjør det med en @ skilt. De gjør fortsatt det samme: lagre en konstant verdi.
Nedenfor vil vi undersøke noen av de mest brukte språkene både i Sass og LESS (basert på min erfaring).
nesting
Nesting regel er god praksis for å unngå å skrive selectors gjentatte ganger, og både Sass og LESS har samme mote i hekkeregler;
Sass / Scss og mindre
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; ul polstring: 0; margin: 0;
Men Sass / Scss tar denne metoden et skritt videre ved å la oss også neste individuelle egenskaper, her er et eksempel:
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; ul polstring: 0; margin: 0; grense: stil: solid; igjen: bredde: 4px; farge: # 333333; Høyre: bredde: 2px; farge: # 000000;
Denne koden vil generere følgende utgang.
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; border-style: solid; border-left-width: 4px; border-left-color: # 333333; border-right-width: 2px; border-right-color: # 000000; nav ul polstring: 0; margin: 0;
Konklusjon: Nestende individuelle egenskaper er et fint tillegg og vurderes beste praksis, spesielt hvis vi følger prinsippet DRY (Gjenta ikke selv). Så, jeg synes det er klart hvilken som gjør det bedre i dette tilfellet.
Mixins og Selector Arv
Mixins i Sass og LESS defineres litt annerledes. I Sass bruker vi@mixin Direktivet, mens i MINDRE definerer vi det med klassevalg. Her er et eksempel:
Sass / SCSS
@mixin border-radius ($ values) border-radius: $ values; nav margin: 50px auto 0; bredde: 788px; høyde: 45px; @include border-radius (10px);
MINDRE
.grense (@radius) border-radius: @radius; nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .border (10 px);
Mixins, i Sass og mindre, er vant til inkludere egenskaper fra ett regelsett til et annet regelsett. I Sass, er denne metoden tatt videre med Selector Arv. Konseptet er identisk, men i stedet for å kopiere hele egenskapene, vil Sass strekke seg eller gruppere selektorer som har de samme egenskapene og verdiene ved hjelp av @forlenge direktiv.
Ta en titt på dette eksemplet nedenfor:
.sirkel grense: 1px solid #ccc; border-radius: 50px; overløp: skjult; .avatar @extend .circle;
Denne koden vil resultere som;
.sirkel, .avatar grense: 1px solid #ccc; border-radius: 50px; overløp: skjult;
Konklusjon: Sass er et skritt foran med forskjellige Mixins og Selectors Arv.
operasjoner
Både Sass og LESS kan gjøre grunnleggende matteoperasjoner, men noen ganger returnerer de forskjellige resultater. Se hvordan de utfører denne tilfeldige beregningen:
Sass / SCSS
$ margin: 10px; div margin: $ margin - 10%; / * Syntaksfeil: Inkompatible enheter: '%' og 'px' * /
MINDRE
@ margin: 10px; div margin: @margin - 10%; / * = 0px * /
Konklusjon: Sass, i dette tilfellet gjør det mer nøyaktig; Siden% og px ikke er ekvivalent, bør den returnere en feil. Selv om jeg faktisk håper at det kan være noe sånt 10px - 10% = 9px.
Feilmeldinger
Feilmelding er viktig for å se hva vi gjør feil. Tenk tusenvis av kodelinjer og en liten bit feil i kaoset. Et klart feilvarsling vil være den beste måten å finne ut av problemet raskt.
sass: I dette eksemplet bruker jeg bare kommandoprompt til å kjøre kompilatoren. Sass vil generere en feilmelding når det er ugyldighet i koden. I dette tilfellet vil vi fjerne en semikolon på linje 6, og dette bør være en feil. Ta en titt på skjermbildet nedenfor.
Da jeg først så dette varselet, kunne jeg nesten ikke forstå det. Også, det virker som Sass er litt av med hvor feilen er. Det sa at feilen er på linje 7, i stedet for 6.
MINDRE: Med det samme feilscenarioet, er MINDRE varslinger mer godt presentert, og det ser også ut til å være mer nøyaktig. Ta en titt på dette skjermbildet:
Konklusjon: MINDRE gir bedre erfaring i denne saken, og vinner hendene ned.
dokumentasjon
Dokumentasjon er svært viktig del for hvert produkt; Selv erfarne utviklere vil finne det vanskelig å gjøre ting uten dokumentasjon.
sass: Hvis vi ser på dokumentasjonen på det offisielle nettstedet, føler jeg at jeg er midt i et bibliotek, dokumentasjonen er veldig omfattende. Likevel, utseendet og følelsen, hvis det betyr noe for deg, er ikke motiverende for lesing, pluss bakgrunnen er vanlig hvit.
Presentasjonen er mye mer som W3-dokumentasjon eller WikiPedia. Jeg vet ikke om dette er standarden for å vise dokumentasjon på Internett, men det er ikke den eneste måten.
MINDRE: På den annen side er MINDRE dokumentasjon tydeligere uten for mange tekstforklaringer, og den dykker rett inn i eksemplene. Det har også god typografi og et bedre fargevalg. Jeg tror dette var grunnen til at MINDRE tiltrukket meg oppmerksomheten i første omgang, og jeg kan lære det raskere på grunn av utformingen og presentasjonen av dokumentasjonen.
Konklusjon: Den MINDRE dokumentasjonspresentasjonen er bedre, selv om Sass har mer omfattende dokumentasjon, så jeg tror vi kan ringe denne sammen.
Endelig tanke
Jeg synes det er en klar konklusjon at Sass er bedre med en total score på 5 versus 3 for mindre. Det betyr imidlertid ikke at mindre er dårlig; de trenger bare å være bedre. Til slutt er det fremdeles sluttbrukerens beslutning om å velge preprosessoren etter eget valg. Det er Sass eller mindre, så lenge de er komfortable og mer produktive, så er det vinneren i sin liste.
Til slutt, hvis du har noe i tankene om dette emnet, kan du dele det i kommentarfeltet nedenfor.
