CSS Preprocessors Jämfört Sass vs MINDRE
Det finns ett antal CSS Preprocessor, LESS, Sass, Stylus och Swith CSS, bara för att nämna några. CSS Preprocessor, som vi har sagt ofta tidigare, är främst avsedd för att skapa författande CSS mer dynamiskt, organiserat och produktivt. Men, Frågan är, vilken av dem gör jobbet bäst?
Nåväl, vi skulle naturligtvis inte titta på var och en av dem, i stället kommer vi bara att jämföra två av de mer populära: Sass och mindre. Att bestämma, vi kommer att jämföra de två i sju faktorer: den som utför bättre får en poäng; I händelse av ett slips får båda två poängen.
Låt oss börja.
Installation
Låt oss börja med det mycket grundläggande steget, Installation. Både Sass och LESS är byggda på olika plattformar, Sass körs på Ruby medan LESS är ett JavaScript-bibliotek (vilket det var faktiskt också byggt på Ruby i början).
sass: Sass behöver Ruby för att kunna arbeta, i Mac har det förinstallerats, men i Windows behöver du förmodligen få det installerat innan du kan börja spela med Sass. Dessutom måste Sass installeras via Terminal eller Command Prompt. Det finns flera GUI-applikationer som du kan använda på plats men de är inte lediga.
MINDRE: MINDRE är byggd på JavaScript, så intalling MINDER är lika enkelt som att länka JavaScript-biblioteket till ditt HTML-dokument. Det finns också några GUI-applikationer som hjälper till att samla LESS till CSS och de flesta av dem är fria och fungerar bra (till exempel WinLess och LESS.app).
Slutsats: MINDRE är tydligt i spetsen.
Extensions
Både Sass och LESS har tillägg för snabbare och enklare webbutveckling.
sass: I vårt senaste inlägg hade vi diskuterat Compass, den nuvarande och populära Sass-baserade förlängningen. Kompass har ett antal Mixins att skriva CSS3-syntax på kortare tid.
Men Compass är bortom bara CSS3 Mixins, den har lagt till andra väldigt användbara funktioner som Hjälpare, Layout, Typografi, Grid Layout och även Sprite Images. Det har också config.rb fil där vi kan styra CSS-utgången och några andra inställningar. Så kort sagt är Compass ett allt-i-ett-paket för att göra webbutveckling med Sass.
MINDRE: MINDRE har också flera tillägg, men till skillnad från Compass som har allt vi behöver på ett ställe, är de separerade och var och en av dem är byggd av olika utvecklare. Detta kommer inte att vara ett problem för erfarna användare, men för dem som bara börjar med MINDRE måste de ta lite tid att välja rätt extensions som passar deras arbetsflöde.
Här är några få MINDRE tillägg som du kanske behöver inkludera i ditt projekt:
- CSS3 Mixins: MINDER Element, Preboot, MINDER MIXINTER.
- Rutnät: 960.gs, Frameless, Semantic.gs
- Layout: Ännu mindre
- Blandat: Twitter Bootstrap
Slutsats: Jag tror att vi måste hålla med Sass och Compass är en bra duo och Sprite-bildfunktionen är verkligen kickass, så en poäng för Sass här.
språk
Varje CSS Preprocessor har sitt eget språk och de är oftast vanliga. Till exempel har både Sass och LESS variabler, men det finns ingen signifikant skillnad i det, förutom att Sass definierar variabler med en $ underteckna medan MINDER gör det med en @ skylt. De gör fortfarande samma sak: lagra ett konstant värde.
Nedan kommer vi att undersöka några av de vanligaste språken både i Sass och LESS (baserat på min erfarenhet).
Nesting
Nesting regel är god praxis för att undvika att skriva väljare flera gånger och både Sass och LESS har samma sätt i häckningsregler.
Sass / Scss och mindre
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; ul vaddering: 0; marginal: 0;
Men Sass / Scss tar den här metoden ett steg längre genom att låta oss också fasta enskilda egenskaper, här är ett exempel:
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; ul vaddering: 0; marginal: 0; border: style: solid; vänster: width: 4px; färg: # 333333; höger: width: 2px; färg: # 000000;
Denna kod kommer att generera följande utdata.
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; gränsstil: fast; gränsen till vänster bredd: 4px; border-left-color: # 333333; gräns-högra bredd: 2px; border-right-color: # 000000; nav ul vaddering: 0; marginal: 0;
Slutsats: Nestande enskilda egenskaper är ett bra tillägg och anses vara bästa praxis, speciellt om vi följer principen DRY (Do not Repeat Yourself). Så jag tycker att det är klart vilket man gör bättre i det här fallet.
Mixins och Selector Arv
Mixins i Sass och LESS definieras lite annorlunda. I Sass använder vi@blanda i direktivet medan vi MINDRE definierar vi det med klassväljaren. Här är ett exempel:
Sass / SCSS
@mixin border-radius ($ -värden) border-radius: $ values; nav margin: 50px auto 0; bredd: 788px; höjd: 45px; @ include border-radius (10px);
MINDRE
.gränsen (@radius) gränsstråle: @radius; nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .border (10px);
Mixins, i Sass och LESS, är vana vid inkludera egenskaper från en regel till en annan regler. I Sass tas denna metod vidare med Selector Arv. Konceptet är identiskt, men istället för att kopiera hela egenskaperna kommer Sass att utöka eller gruppera selektorer som har samma egenskaper och värden med hjälp av @förlänga direktiv.
Ta en titt på detta exempel nedan:
.cirkel border: 1px solid #ccc; gränsstråle: 50px; översvämning: gömd; .avatar @extend .circle;
Denna kod kommer att resultera som;
.cirkel, .avatar border: 1px solid #ccc; gränsstråle: 50px; översvämning: gömd;
Slutsats: Sass är ett steg framåt med distinkta Mixins och Selectors Arv.
Operationer
Både Sass och LESS kan göra grundläggande matematiska operationer, men ibland ger de olika resultat. Se hur de utför denna slumpmässiga beräkning:
Sass / SCSS
$ marginal: 10px; div margin: $ margin - 10%; / * Syntaxfel: Inkompatibla enheter: '%' och 'px' * /
MINDRE
@ margin: 10px; div margin: @margin - 10%; / * = 0px * /
Slutsats: Sass, i det här fallet gör det mer exakt; Eftersom% och px inte är likvärdiga, bör det returnera ett fel. Trots att jag faktiskt hoppas att det kan vara något liknande 10px - 10% = 9px.
Felmeddelanden
Felmeddelande är viktigt för att se vad vi gör fel. Tänk dig tusentals kodrader och en liten bit av fel någonstans i kaoset. En tydlig felmeddelande kommer att vara det bästa sättet att räkna ut problemet snabbt.
sass: I det här exemplet använder jag bara Kommandotolken för att köra kompilatorn. Sass kommer att generera en felmeddelande när det finns invaliditet i koden. I det här fallet kommer vi att ta bort en semikolon på rad 6, och detta borde bli ett fel. Ta en titt på skärmdumpen nedan.
När jag först såg denna anmälan kunde jag knappast förstå det. Det verkar också som att Sass är lite av med var felet är. Det sa att felet är på rad 7, istället för 6.
MINDRE: Med samma felscenario är MINDRE anmälningar mer välpresenterade och det verkar också vara mer exakt. Ta en titt på denna skärmdump:
Slutsats: LÄSER levererar bättre erfarenhet i denna fråga och vinner händer.
Dokumentation
Dokumentation är mycket viktig del för varje produkt; även erfarna utvecklare skulle ha svårt att göra saker utan Dokumentation.
sass: Om vi tittar på dokumentationen på den officiella webbplatsen känner jag personligen att jag är mitt i ett bibliotek, dokumentationen är väldigt omfattande. Ändå är utseendet och känslan, om det är viktigt för dig, inte motiverande för läsning, och bakgrunden är vanlig vit.
Presentationen är mycket mer som W3-dokumentation eller WikiPedia. Jag vet inte om det här är standarden för att visa dokumentation på Internet, men det är inte det enda sättet.
MINDRE: Å andra sidan är MINDRE dokumentation tydligare utan för många textförklaringar, och det dyker direkt in i exemplen. Det har också bra typografi och ett bättre färgschema. Jag tror att det var därför MINDRE lockade min uppmärksamhet i första hand och jag kan lära mig snabbare på grund av dokumentationen och presentationen av dokumentationen.
Slutsats: Den lägsta dokumentationspresentationen är bättre, även om Sass har mer omfattande dokumentation, så jag tror att vi kan ringa den här.
Slutlig tanke
Jag tycker att det är en klar slutsats att Sass är bättre med en total poäng av 5 mot 3 för mindre. Det betyder emellertid inte att mindre är dåligt; de behöver bara vara bättre. I slutändan är det ändå upp till slutanvändarens beslut att välja preprocessorn efter eget val. Var det Sass eller LESS, så länge de är bekväma och mer produktiva, så är det vinnaren i sin lista.
Slutligen, om du har något i åtanke om detta ämne, kan du dela det i kommentarfältet nedan.
