CSS Preprocessors vergeleken Sass vs. LESS
Er zijn een aantal CSS Preprocessor, LESS, Sass, Stylus en Swith CSS, om er maar een paar te noemen. CSS Preprocessor, zoals we al vaker hebben gezegd, is primair bedoeld om het schrijven van CSS dynamischer, georganiseerd en productiever te maken. Maar, de vraag is, wie van hen zijn best doet?
Nou, natuurlijk zouden we niet elk van hen bekijken, in plaats daarvan zullen we alleen twee van de meer populaire vergelijken: Sass en LESS. Om te beslissen, zullen we de twee in zeven factoren vergelijken: degene die beter presteert krijgt een punt; in het geval van een gelijkspel, krijgen beiden een punt toegekend.
Laten we beginnen.
Installatie
Laten we beginnen met de zeer fundamentele stap, Installatie. Zowel Sass als LESS zijn gebouwd op een ander platform, Sass draait op Ruby terwijl LESS een JavaScript-bibliotheek is (en dat is het was eigenlijk ook gebouwd op Ruby aanvankelijk).
Sass: Sass heeft Ruby nodig om te werken, in Mac is dit vooraf geïnstalleerd, maar in Windows moet je het waarschijnlijk eerst installeren voordat je met Sass kunt spelen. Bovendien moet Sass worden geïnstalleerd via de terminal of opdrachtprompt. Er zijn verschillende GUI-toepassingen die u op hun plaats kunt gebruiken, maar ze zijn niet gratis.
MINDER: LESS is gebouwd op JavaScript, dus intalling LESS is net zo eenvoudig als het koppelen van de JavaScript-bibliotheek aan uw HTML-document. Er zijn ook enkele GUI-toepassingen die helpen bij het compileren van MINDER voor CSS en de meeste zijn gratis en presteren erg goed (bijvoorbeeld WinLess en LESS.app).
Conclusie: LESS loopt duidelijk voorop.
uitbreidingen
Zowel Sass als LESS hebben uitbreidingen voor snellere en eenvoudigere webontwikkeling.
Sass: In ons laatste bericht hadden we gesproken over Compass, de huidige en populaire op Sass gebaseerde extensie. Compass heeft een aantal Mixins om CSS3 syntax te schrijven in minder tijd.
Maar Compass gaat verder dan alleen CSS3 Mixins, het heeft andere zeer nuttige functies toegevoegd zoals Helpers, Layout, Typography, Grid Layout en zelfs Sprite Images. Het heeft ook config.rb bestand waar we de CSS-uitvoer en enkele andere voorkeuren kunnen beheren. Kortom, Compass is een alles-in-één pakket om webontwikkeling met Sass te doen.
MINDER: LESS heeft ook verschillende extensies, maar anders dan Compass heeft alles wat we nodig hebben op één plek, ze zijn gescheiden en elk van hen is gebouwd door verschillende ontwikkelaars. Dit zal geen probleem zijn voor ervaren gebruikers, maar voor degenen die net beginnen met LESS, moeten ze wat tijd nemen om de juiste extensies te kiezen die passen bij hun workflow.
Hier zijn een paar MINDER extensies die u mogelijk in uw project moet opnemen:
- CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
- rooster: 960.gs, Frameless, Semantic.gs
- lay-out: Zelfs minder
- Misc: Twitter Bootstrap
Conclusie: Ik denk dat we het erover eens moeten zijn dat Sass en Compass een geweldig duo zijn en dat de Sprite-beeldfunctie echt kickass is, dus één punt voor Sass hier.
talen
Elke CSS Preprocessor heeft zijn eigen taal en deze zijn meestal gebruikelijk. Sass en LESS hebben bijvoorbeeld variabelen, maar er is geen significant verschil in, behalve dat Sass variabelen definieert met een $ teken terwijl MINDER het doet met een @ teken. Ze doen nog steeds hetzelfde: bewaar een constante waarde.
Hieronder zullen we een aantal van de meest gebruikte talen in Sass en LESS behandelen (gebaseerd op mijn ervaring).
nesting
Een nestregel is een goede gewoonte om te voorkomen dat u selectoren herhaaldelijk schrijft en zowel Sass als LESS hebben dezelfde manier van nestregels;
Sass / Scss en LESS
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; ul opvulling: 0; marge: 0;
Maar Sass / Scss neemt deze methode een stap verder door ons toe te staan ook individuele eigenschappen te nesten, hier is een voorbeeld:
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; ul opvulling: 0; marge: 0; border: style: solid; links: width: 4px; kleur: # 333333; rechts: width: 2px; kleur: # 000000;
Deze code genereert de volgende uitvoer.
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; randstijl: stevig; border-left-width: 4px; border-left-colour: # 333333; border-right-width: 2px; border-right-colour: # 000000; nav ul opvulling: 0; marge: 0;
Conclusie: Nesten van individuele eigenschappen is een leuke toevoeging en wordt overwogen beste oefening, vooral als we het DRY (Do not Repeat Yourself) -principe volgen. Dus ik denk dat het duidelijk is welke het beter doet in dit geval.
Mixins en selector-overerving
Mixins in Sass en LESS zijn iets anders gedefinieerd. In Sass gebruiken we de@mixin richtlijn terwijl in MINDER we het definiëren met klasse selector. Hier is een voorbeeld:
Sass / SCSS
@mixin border-radius ($ values) border-radius: $ values; nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; @ include border-radius (10px);
MINDER
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .border (10px);
Mixins, in Sass en LESS, is gewend aan omvatten eigenschappen van de ene regelset naar een andere regelset. In Sass wordt deze methode verder meegenomen Selector Inheritance. Het concept is identiek, maar in plaats van de volledige eigenschappen te kopiëren, breidt Sass selectors uit of groepeert deze met dezelfde eigenschappen en waarden met behulp van de @uitbreiden richtlijn.
Bekijk dit voorbeeld hieronder:
.circle border: 1px solid #ccc; grensradius: 50px; overloop verborgen; .avatar @extend .circle;
Deze code resulteert als;
.circle, .avatar border: 1px solid #ccc; grensradius: 50px; overloop verborgen;
Conclusie: Sass is een stap vooruit door verschillende overnamen en overheersers te vermengen.
Activiteiten
Zowel Sass als LESS kunnen elementaire wiskundige bewerkingen uitvoeren, maar soms geven ze verschillende resultaten. Kijk hoe ze deze willekeurige berekening uitvoeren:
Sass / SCSS
$ marge: 10px; div margin: $ marge - 10%; / * Syntaxisfout: incompatibele eenheden: '%' en 'px' * /
MINDER
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Conclusie: Sass doet het in dit geval nauwkeuriger; omdat% en px niet hetzelfde is, zou het een fout moeten opleveren. Hoewel, ik hoop eigenlijk dat het zoiets kan zijn 10px - 10% = 9px.
Foutmeldingen
Foutmelding is belangrijk om te zien wat we verkeerd doen. Stel je voor ergens in de chaos duizenden regels code en een klein foutje. Een duidelijke foutmelding is de beste manier om het probleem snel te achterhalen.
Sass: In dit voorbeeld gebruik ik de opdrachtprompt om de compiler uit te voeren. Sass genereert een foutmelding wanneer er sprake is van ongeldigheid in de code. In dit geval zullen we een puntkomma op regel 6 verwijderen, en dit zou een fout moeten worden. Bekijk de onderstaande screenshot.
Toen ik deze melding voor het eerst zag, kon ik het nauwelijks begrijpen. Ook lijkt het erop dat Sass een klein beetje afwijkt van waar de fout zit. Er staat dat de fout aan is regel 7, in plaats van 6.
MINDER: Met hetzelfde foutscenario is de MINDER-melding beter gepresenteerd en lijkt deze ook nauwkeuriger. Bekijk deze screenshot:
Conclusie: LESS levert betere ervaringen op dit gebied, en wint zonder meer.
Documentatie
Documentatie is een zeer cruciaal onderdeel voor elk product; zelfs doorgewinterde ontwikkelaars zouden het moeilijk vinden om dingen zonder te doen Documentatie.
Sass: Als we de documentatie bekijken op de officiële site, voel ik me persoonlijk midden in een bibliotheek, de documentatie is zeer uitgebreid. Toch is het uiterlijk en het gevoel, als dat belangrijk voor je is, niet motiverend om te lezen, plus de achtergrond is gewoon wit.
De presentatie lijkt veel meer op W3-documentatie of WikiPedia. Ik weet niet of dit de standaard is voor het weergeven van documentatie op internet, maar het is niet de enige manier.
MINDER: Anderzijds is de MINDER-documentatie duidelijker zonder al te veel tekstverklaringen en duiken ze rechtstreeks de voorbeelden in. Het heeft ook een goede typografie en een beter kleurenschema. Ik denk dat dit de reden was waarom MINDER in de eerste plaats mijn aandacht trok en ik het sneller kan leren vanwege de lay-out en presentatie van de documentatie.
Conclusie: De documentatie met de MINDER documentatie is beter, hoewel Sass uitgebreidere documentatie heeft, dus ik denk dat we deze een gelijkspel kunnen noemen.
Laatste gedachte
Ik denk dat het een duidelijke conclusie is Sass is beter met een totale score van 5 tegen 3 voor minder. Dit betekent echter niet dat MINDER slecht is; ze moeten gewoon beter zijn. Uiteindelijk is het nog steeds de beslissing van de eindgebruiker om de preprocessor van zijn keuze te kiezen. Of het nu Sass of LESS is, zolang ze comfortabel en productiever zijn, dan is dat de winnaar in hun lijst.
Als u ten slotte iets over dit onderwerp in gedachten heeft, kunt u dit in het opmerkingenveld hieronder delen.
