Share
De wereld van front-end webontwikkeling heeft gestaag de acceptatie van wat wij noemen "CSS Preprocessors", die de functionaliteit van reguliere CSS uitbreiden, gestaag uitgebreid. Wellicht de twee meest bekende, met de grootste gebruikersbasis, zijn MINDER en Sass / SCSS. Er is echter nog een derde preprocessor die niet zoveel aandacht heeft gekregen, en dat is Stylus.
Vandaag zullen we bespreken waarom Stylus ontzagwekkend is, waarom ik het kies en waarom het misschien gewoon je nieuwe CSS-held wordt.
Voordat we ingaan op de details van hoe Stylus werkt, begin ik met mijn eigen kijk op de overheersende sterke punten van LESS en Sass / SCSS, en waarom ik geen van beiden kies, ook al zijn ze allebei.
Elk van de drie preprocessors omvat het gebruik van variabelen, mixins, nesting en uitbreiding, samen met verschillende gradaties van logische bewerkingen en functies. Dus alle drie zijn hetzelfde, in zoverre dat ze je abstracte ontwerpelementen laten abstracten, logica gebruiken en minder code schrijven, waardoor ze allemaal in staat zijn om je grote winsten te geven ten opzichte van onbewerkte CSS wanneer ze goed worden gebruikt.
Omdat alle drie hetzelfde zijn in deze basiszin, is het echter de manier waarop ze verschillen, wat uiteindelijk zal leiden tot uw keuze om te gebruiken.
Voor mij is de grootste kracht buiten de gemeenschappelijke aspecten van alle drie preprocessors de gemeenschap rond MINDER en het aanbod dat door hen is gemaakt.
Het meest bekende project waarin LESS is opgenomen, is het Twitter Bootstrap-raamwerk, en ik vermoed dat de wens om ermee te werken een groot deel is van wat veel mensen op hun beurt naar MINDER leidt.
Een andere opvallende verschijning is de LESShat-mixinbibliotheek, die een uitstekende reeks mixins voor CSS3-effecten en meer biedt, en haar partner de CSShat-plug-in voor Photoshop, die de LESS-code copy & paste van PSD-elementen genereert. In het bijzonder creëren deze twee items samen een zeer krachtige workflow die fantastisch is als je veel ontwerpprocessen binnen Photoshop uitvoert.
En nog een groot pluspunt voor MINDER is het feit dat de meeste mensen het vrij toegankelijk vinden om te gebruiken. U kunt een eenvoudig JavaScript-bestand gebruiken om het on-the-fly te compileren, u kunt een IDE gebruiken met ingebouwde compilatie zoals CrunchApp (of alleen CodeKit op Mac), of u kunt Node.js op uw lokale computer gebruiken voor een robuuster / flexibele compileeroplossing.
Ik geef altijd de voorkeur aan mijn eigen code boven frameworks van derden, en ik ben ook geneigd tegenwoordig een minimaal Photoshop-ontwerp te doen, waarbij ik er de voorkeur aan geef om dynamisch zoveel mogelijk in de browser te ontwerpen. (CSSHat kan ook in meerdere talen worden uitgevoerd). Dus voor mij, zo goed als de projecten die ik heb beschreven, zijn ze alleen niet voldoende om me te dwingen LESS te kiezen als mijn preprocessor.
Maar de grootste reden dat ik LESS niet gebruik, is in feite de aanzienlijke kloof in de beschikbare logische verwerkingsfuncties tussen het en de andere twee grote preprocessors.
Helaas, hoe minder logica-gebaseerde functies die beschikbaar zijn voor gebruik, hoe minder we in staat zijn om minimale, schone code te creëren, en de langzamere ontwikkeling en daaropvolgende wijziging zal zijn.
MINDER laat enige logica toe, maar het is echt vrij beperkt in vergelijking met Stylus en Sass / SCSS. Je zult zien waarom in mijn beschrijving van wat geweldig is aan Sass.
Sass heeft ook een geweldige community met veel geweldige projecten die beschikbaar zijn om te gebruiken. Waar LESS Twitter Bootstrap heeft, heeft Sass frameworks zoals Gumby en Foundation. Waar LESS LESShat heeft, heeft Sass mixin-bibliotheken zoals Compass en Bourbon.
Waar het echter echt tot zijn recht komt vergeleken met LESS is het krachtige vermogen om met logica om te gaan. Waar LESS wat je zou kunnen noemen verbeterde CSS, gedraagt Sass zich veel meer als een complete programmeertaal.
Met Sass kunt u bijvoorbeeld efficiënt geschreven voorwaardelijke controles maken, wat met name handig is binnen mixins.
In Sass zou je het volgende kunnen doen:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: $ bg_color; @else background-color: transparent;
Deze mix controleert of $ border_on ingesteld op waar, en als dat zo is, gebruikt het de $ border_color waarde in de uitvoer voor de grens eigendom. Zo niet, dan valt het terug op het instellen van de grens eigendom aan 0.
Het controleert vervolgens ook of $ bg_on ingesteld op waar, en als dat zo is, gebruikt het de $ bg_color waarde in de uitvoer voor de Achtergrond kleur eigendom. Als dat niet het geval is, wordt de Achtergrond kleur eigendom aan transparant
Dit betekent dat, afhankelijk van de waarden die worden doorgegeven, tot vier verschillende soorten uitvoer kunnen worden gegenereerd uit een enkele mixin, d.w.z. grens en achtergrond zowel op, grens en achtergrond zowel uit, rand aan en achtergrond uit, rand uit en achtergrond op.
In LESS zijn er echter geen "if / else" -controles, dus het bovenstaande zou niet mogelijk zijn. Het meeste dat je kunt doen met MINDER is het gebruik van zogenaamde "Bewaakte Mixins", waarbij een bepaalde mixin verschillend wordt uitgevoerd op basis van een controle tegen een enkele expressie.
Dus je mix kan controleren of het @grenzen aan parameter was ingesteld op waar zoals zo:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = true) border: 1px solid @border_color;
Omdat het de "if / else" -functionaliteit mist, heeft het echter evenmin de mogelijkheid om de waarde van te controleren @bg_on, noch om een alternatieve waarde te geven voor de grens eigendom binnen dezelfde mixin.
Om dezelfde logica te bereiken die werd afgehandeld met een enkele Sass-mixin, zou u vier verschillende bewaakte mixins met LESS moeten maken, d.w.z. één voor elk van de mogelijke combinaties van @grenzen aan en @bg_on waarden, zoals zo:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) wanneer (@border_on = true) en (@bg_on = true) border: 1px solid $ border_color; achtergrondkleur: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = false) en (@bg_on = false) border: 0; achtergrondkleur: transparant; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = false) en (@bg_on = true) border: 0; achtergrondkleur: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = true) en (@bg_on = false) border: 1px solid @border_color; achtergrondkleur: transparant;
En dat is alleen met twee waarden om te controleren; het aantal neemt toe met elke waarde waarop u logica wilt uitvoeren, wat erg onpraktisch kan worden omdat u meer geavanceerde mixins wilt maken. Het is ook een moeizaam proces om alle mogelijke permutaties van variabele combinaties te overwegen om ze allemaal te verantwoorden.
Dat is slechts één voorbeeld van waar verbeterde logica het leven veel gemakkelijker maakt met Sass vs. LESS, maar er zijn er nog veel meer. Met name biedt Sass ook uitstekende iteratievaardigheden via zijn @voor, @elk en @terwijl richtlijnen.
En tot slot, heel belangrijk, terwijl LESS enkele uitstekende ingebouwde functies heeft, maakt Sass het heel gemakkelijk om je eigen te schrijven. Ze zijn gewoon geschreven als:
@function function-name ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Deze logische functies openen een wereld van mogelijkheden voor dingen zoals het maken van uw eigen layout-engines, px to em handling, kleurmodifiers en snelkoppelingen voor een oneindig aantal dingen die u van project tot project nodig zou kunnen hebben.
Van alles wat ik heb gelezen en gehoord waar mensen over babbelen, en vanuit mijn eigen ervaring is het deze sterk verbeterde logische kracht die de belangrijkste driver is voor mensen die Sass kiezen boven MINDER.
Aangezien LESS voor de meeste projecten is uitgesloten vanwege de beperkte logische bewerkingen, komt het neer op een keuze tussen Sass en Stylus, die beide beschikken over een krachtige reeks functies..
En tussen de twee koos ik Stylus. Stylus heeft de kracht van Sass, met de toegankelijkheid van MINDER.
Stylus.js doet alles wat ik nodig heb dat Sass doet, maar het vereist alleen JavaScript of Node.js om te compileren. Plus, het heeft een bepaalde manier van werken die soepel en gemakkelijk is om mee te werken, en het heeft een mooie schone syntaxis die ik verkies.
Voor mij is de vereiste om Ruby on Rails uit te voeren en met edelstenen om te gaan een groot obstakel om met Sass te willen werken. Ruby maakt geen deel uit van een van de projecten die ik ontwikkel, dus de enige reden dat ik ooit te maken heb met het installeren van het en alle edelstenen, is uitsluitend om met Sass om te gaan. Dat is een reeks verbindingsfouten en installatieproblemen die ik niet nodig heb als ik dit kan voorkomen.
Ik vermoed dat veel andere mensen zich ook in dezelfde boot bevinden om Ruby niet anders te gebruiken, en niet speciaal willen om een CSS-preprocessor te gebruiken.
Hoewel ik Ruby moet installeren om Sass te kunnen gebruiken, moet ik nog steeds samenwerken met Node.js en NPM om Grunt te gebruiken voor andere aspecten van mijn projecten, zoals kijken naar wijzigingen, combineren en verkleinen JavaScript enzovoort, evenals Bower voor ander pakketbeheer.
Notitie: er is een programma genaamd Scout voor Mac en Windows dat de compilatie voor je zal afhandelen, maar opnieuw waar mogelijk vermijd ik liever het installeren van iets voor slechts één doel, in plaats van te werken met hulpmiddelen die ik voor meerdere doeleinden kan gebruiken. Er is ook CodeKit, maar dat is alleen Mac.
Dus wanneer er een preprocessor zoals Stylus is die alle logische kracht heeft die ik nodig heb, maar die gemakkelijk kan worden gebruikt met mijn voorkeurs-IDE en bestaande Node.js-setup of pure JavaScript, is het alleen maar logisch om deze te kiezen.
Veel mensen vinden het setup-proces voor Sass intimiderend vanwege de Ruby-factor en kiezen om die reden voor MINDER. Ik merk echter dat het gemak van de setup voor Stylus in essentie op hetzelfde niveau ligt als bij LESS, terwijl ik het volledige scala aan logische functionaliteit heb.
Maar het gaat niet alleen om Ruby, of zelfs alleen om de logische functionaliteit die beschikbaar is. Het gaat ook over de specifieke manier waarop Stylus werkt en de syntaxis die het gebruikt, die ik ongelooflijk schoon, flexibel en soepel vind in vergelijking met zowel LESS als Sass..
Dus nu, laat me je vertellen waarom ik Stylus heb gekozen, en waarom het misschien je nieuwe CSS-held is.
Zoals ik hierboven heb besproken, heb ik Stylus gekozen vanwege zijn:
Om u echt te laten zien waarom ik bij het bovenstaande allemaal voor Stylus moet kiezen, moeten we er even in springen en het een beetje gebruiken, zodat ik u precies kan laten zien waar ik het over heb.
Laten we beginnen met de grootste horde die mensen tegenkomen met CSS-preprocessors, welke ze ook kiezen, en dat is de setup en compilatie.
Een groot deel van de reden waarom ik voor Stylus heb gekozen, is dat ik het kan instellen als onderdeel van mijn normale methoden voor het maken van projecten, en daardoor kan ik het gebruiken met mijn favoriete IDE. Ik zal je laten zien hoe.
Ja, er zijn enkele commandoregelprocessen die hierbij betrokken zijn, maar neem het van iemand die nooit een opdrachtregel heeft gebruikt voordat preprocessors dit nodig hadden - het is lang niet zo moeilijk als je denkt, en als je de opdrachtregel gebruikt, voel je je tien procent slimmer dan voorheen. :)
Dat gezegd hebbende, heb ik een pakket samengesteld, dat u kunt pakken door op de knop "Downloaden" bovenaan dit artikel te klikken, wat betekent dat u nauwelijks hoeft te denken aan de opdrachtregel als u Windows gebruikt. Slechts een paar keer dubbelklikken en je bent klaar voor gebruik.
Als je Mac of Linux gebruikt, vrees dan niet, want er zijn maar drie commando's die je moet uitvoeren om het pakket te gebruiken, ik zal je helpen met hoe, en ze zijn super gemakkelijk.
Dit pakket zal uw bron Stylus-bestanden bekijken op veranderingen en het zal deze in CSS-bestanden voor u compileren. Je kunt het gebruiken met elke IDE die je wilt, wat een groot voordeel is van deze specifieke aanpak.
Voor mij persoonlijk is het de episch geweldige Sublime Text 2. Het is ook de IDE die ik aanbeveel voor gebruik met Stylus vanwege het uitstekende Stylus syntax highlight-pakket dat er voor beschikbaar is, die ik hieronder zal behandelen.
Node.js is tegenwoordig een must-have voor front-end webontwikkeling. Er zijn zoveel geweldige gereedschappen die er bovenop werken, dus met installeren kun je je niet alleen vestigen op Stylus, maar ook op tal van andere dingen.
Ga naar http://nodejs.org/download/ en download het installatieprogramma voor uw besturingssysteem.
Voer het installatieprogramma uit zoals elk ander om Node.js op uw systeem te installeren.
Grunt is een ongelooflijke tool voor het uitvoeren van JavaScript-taken. Je kunt het voor meer dan tweeduizend verschillende doeleinden gebruiken via de plug-ins, die hier worden vermeld: http://gruntjs.com/plugins
In ons geval zullen we het gebruiken om onze Stylus-bestanden te bekijken en ze in CSS te compileren wanneer ze veranderen.
Bereid je voor op je eerste smaak van de commandoregel, dus open een opdrachtvenster / terminal.
In Windows vind ik de eenvoudigste manier om Windows Verkenner te openen, dan houd je binnen een willekeurige map de SHIFT-toets ingedrukt en klik je met de rechtermuisknop. In het contextmenu ziet u vervolgens 'Open het opdrachtvenster hier', waarop u moet klikken:
U kunt ook op de knop "Start" klikken, vervolgens op "cmd" zoeken en op ENTER drukken om het opdrachtvenster weer te geven.
Als je Linux gebruikt, vermoed ik dat je waarschijnlijk al weet hoe je een terminal moet openen, maar als dit niet het geval is, kun je lezen hoe de verschillende distro's werken: https://help.ubuntu.com/community/UsingTheTerminal
En als je op Mac zit, bekijk dan de inleiding van A Designer tot de commandoregel.
Typ nu de volgende opdracht en druk op ENTER:
npm install -g grunt-cli
Er verschijnt een lading tekst zoals deze in het venster:
Wacht tot dat alles is voltooid en er een nieuwe opdrachtprompt verschijnt. Dat betekent dat de installatie is voltooid en dat u vervolgens het opdrachtvenster / de terminal kunt sluiten. U hoeft dit slechts één keer te doen omdat het Grunt op uw systeem zal installeren met globale toegang, zodat u het kunt gebruiken vanuit elke toekomstige projectmap die u instelt.
Nu bent u klaar om een daadwerkelijk project op te zetten met behulp van het StylusCompiler-pakket dat ik heb geleverd. Dit is het proces dat u zult herhalen voor elk nieuw ontwerpproject dat u begint.
Laten we dit stap voor stap doen.
Maak een map om uw project onder te brengen. Voor deze demo bellen we het gewoon EGProject.
Maak daarbinnen een tweede map met de naam css. Dit is de map waarin uw CSS-bestanden worden geschreven.
Pak nu het StylusCompiler.zip bestand in deze map.
Je zou een structuur moeten krijgen die er zo uitziet:
Ga naar de StylusCompiler map en, als u Windows gebruikt, dubbelklikt u op het bestand met de naam double_click_to_install.bat.
Als u geen Windows gebruikt, opent u een terminal in de StylusCompiler map, (of open een terminal en navigeer vervolgens / cd naar de map). Typ het volgende en druk op ENTER:
npm installerenHiermee wordt de compiler in uw projectmap geïnstalleerd. Nogmaals, je ziet een aantal dingen zoals deze in het venster verschijnen:
Als u Windows gebruikt en dubbelklikt op het .bat-bestand, wordt het venster gesloten zodra de installatie is voltooid. Als dit niet het geval is, wacht u tot de tekst niet meer beweegt en verschijnt er een nieuwe opdrachtprompt. Houd uw terminal open voor de volgende stap. Nu hoeft u alleen maar de "horloge" -functie te starten die u via Grunt voor het project hebt ingesteld. Dit zal de schrijfstift map in de StylusCompiler map voor wijzigingen in elke map .styl bestanden erin.
Maak gewoon alle Stylus-bestanden die u nodig hebt schrijfstift map en je bent klaar om te gaan. Notitie: Al uw Stylus-bestanden moeten de .styl bestandsextensie. Wanneer wijzigingen in bestanden in die map worden opgeslagen, compileert het pakket uw Stylus-code in CSS en schrijft deze in een bestand met de naam style.css in de css map van uw project. Nog steeds in de StylusCompiler map, als u Windows gebruikt, dubbelklikt u op het bestand met de naam watch_and_compile.bat.
Als u niet op Windows werkt, met uw terminal nog in de StylusCompiler map, typ het volgende en druk op ENTER:
gegrom horloge
U zou dit in het opdrachtvenster / de terminal moeten zien:
Nu als u wijzigingen opslaat in een bestand in de StylusCompiler> stylus map, (zolang u geen fouten in uw code hebt gemaakt), ziet u het volgende:
Als u klaar bent met het werken aan uw Stylus-bestanden, kunt u het opdrachtvenster / de terminal gewoon sluiten, of als u nog een opdracht moet uitvoeren, kunt u op CTRL + C drukken om de "kijk" -taak te stoppen.
Een van de redenen waarom ik graag met dit type projectopstelling werk, is dat je de volledige controle hebt, zodat je je project naar eigen smaak kunt instellen en op elk moment kunt wijzigen. Als u dingen zoals de uitvoermap voor uw CSS wilt wijzigen, de uitvoerbestandsnaam, of de CSS nu is gecomprimeerd of niet, kunt u dit doen in het bestand met de naam Gruntfile.js in de StylusCompiler map.
We gebruiken de grunt-contrib-stylus-plug-in voor Grunt om de compilatie af te handelen, zodat je hier een volledige overzicht krijgt van alle mogelijke configuraties: https://github.com/gruntjs/grunt-contrib-stylus.
Hier zijn echter de belangrijkste opties die u waarschijnlijk wilt hebben.
Stel de samenpersen optie om waar voor productiegereedgemaakte geminimaliseerde CSS, of voor vals voor uitgebreide CSS terwijl je nog in ontwikkeling bent.
De standaardbestandsnaam waarnaar wordt geschreven is "style.css". Als u wilt dat het bestand iets anders wordt genoemd, vervangt u 'style.css' door uw keuze op deze regel.
Standaard zal de compiler één niveau opzoeken vanaf de StylusCompiler map en schrijf in de css map daarin.
Als u wilt dat uw CSS-bestanden ergens anders worden geschreven, wijzigt u de waarde op deze regel van '... / css' naar uw gewenste locatie.
Zoals ik hierboven al zei, het mooie van deze aanpak is dat je elke IDE helemaal kunt gebruiken om je Stylus-bestanden te bewerken en ze zullen precies hetzelfde compileren. Ik raad echter ten zeerste aan Sublime Text 2 te gebruiken als het Stylus-syntaxisaccenteringspakket dat beschikbaar is, omdat het werken met Stylus een genot maakt.
Je kunt Sublime Text 2 hier downloaden: http://www.sublimetext.com/2.
Ga na het downloaden en installeren naar deze pagina en volg de instructies voor het installeren van "Package Control", de schitterende pakketbeheerder voor Sublime Text: https://sublime.wbond.net/installation#st2
Installeer tot slot het Stylus-syntaxis-highlightpakket. Open Package Control door naar Preferences> Package Control te gaan zoals:
Klik in de lijst die verschijnt op de optie "Pakket installeren" en wacht een paar seconden terwijl een lijst met beschikbare pakketten wordt opgehaald:
Typ 'stylus' in het veld boven de lijst met pakketten om ernaar te zoeken en klik vervolgens op het resultaat 'Stylus' om het te installeren:
Dit pakket wordt nu lastig om te lezen, normale CSS-opmaak als volgt:
... in gemakkelijk gedifferentieerde Stylus-geformatteerde code zoals deze:
Een van de dingen die ik absoluut leuk vind aan Stylus is de totale flexibiliteit op syntaxis.
Met LESS moet alle code op dezelfde manier worden geschreven als normale CSS, d.w.z. u moet accolades, dubbele punten en puntkomma's op dezelfde manier opnemen als CSS.
Met Sass / SCSS heeft u de keuze:
Stylus daarentegen is volledig flexibel en u hoeft geen compilatie-opties in te stellen voor de manier waarop u wilt schrijven.
Al deze voorbeelden worden gecompileerd in Stylus en de benaderingen van syntaxis kunnen samen in hetzelfde document worden gebruikt:
Alleen Stylus staat het weglaten van al deze syntaxiselementen toe, in verschillende mate, en de 'on the fly'-combinatie van deze benaderingen, zodat u kunt doen wat u wilt, terwijl uw project meebeweegt.
Deze functionaliteit is geweldig voor ontwikkeling. Je zult verbaasd zijn om te zien hoeveel groter je flow is als je alle syntaxis "interpunctie" weglaat die je maar kunt. Uw codering en uw denkproces terwijl u voortgaat, wordt zo veel soepeler. En met de syntaxisaccentuering van het pakket dat we eerder hebben geïnstalleerd, zult u merken dat uw code net zo leesbaar zal zijn.
Maar tegelijkertijd is de compilatie zeer vergevingsgezind. Als u om de een of andere reden besluit dat de reguliere CSS-syntaxis een deel van uw document beter zal organiseren, kunt u gewoon doorgaan en het gebruiken wanneer u maar wilt. En als u per ongeluk een puntkomma mist hier of daar, vindt niemand het goed.
Je zag hierboven enkele voorbeelden van hoe variabelen, mixins, voorwaardelijke controles en functies eruitzien in LESS en Sass. Voor mijn oog vind ik de Stylus-benadering van deze gemakkelijker te bekijken, te lezen en in het algemeen te gebruiken.
In LESS moeten variabelen worden voorgezet met de @ symbool. In Sass moeten ze worden voorgevoegd met de $ symbool. In Stylus hoeft een variabele echter helemaal niet te worden toegevoegd.
Notitie: U kunt optioneel de $ symbool als je dat liever hebt, maar niet het @ symbool omdat dit voor andere doeleinden in Stylus is gereserveerd.
Evenzo hoeven mixins, voorwaardelijke controles en functies niet te worden voorafgegaan met iets in Stylus.
In LESS moet een mixin op dezelfde manier worden geschreven als een normale CSS-klasse, en er zijn geen voorwaardelijke controles of aangepaste functies.
In Sass moeten mixins worden bijgevoegd met @mixin en gebeld met @include, voorwaardelijke cheques worden geschreven als @als en @anders, en functies moeten worden voorafgegaan met @functie en voeg een regel toe die vooraf is gegaan met @return.
Geen van deze dingen is vereist in de Stylus. Je kunt gewoon op natuurlijke wijze schrijven zoals je zou kunnen in de reguliere taal. Bijvoorbeeld, eerder gebruikten we dit voorbeeld Sass mixin en functie:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: 1px solid $ bg_color; @else background-color: transparent;
@function function-name ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Deze mixin en functie zouden als volgt worden genoemd:
.callem @omlude border_and_bg (waar, # 000, waar, #fff); lettertypegrootte: functienaam (6);
In Stylus kunnen deze als volgt worden geschreven en gebeld:
Dit is voor mij heel netjes, gemakkelijk te lezen en te schrijven en past bij het doel van de preprocessor om code schoon en minimaal te maken.
Houd er ook rekening mee dat ik in het bovenstaande voorbeeld alle syntaxis "interpunctie" weggelaten heb die kan worden weggelaten, maar het is volledig optioneel hoeveel u er in uw ontwikkeling buiten wilt laten..
Ik heb bijvoorbeeld het border_and_bg mixin naadloos, schrijf het in wezen op dezelfde manier als ik een normale CSS-eigenschap zou doen, zonder haakjes om de parameters of komma's daartussenin. Als u echter de voorkeur geeft, kunt u haakjes en komma's opnemen wanneer u mixins oproept, het is geheel aan u.
Een van de beste dingen over werken met Sass en LESS zijn respectievelijk de Compass / Bourbon en LESShat mixin bibliotheken. Maar u zult dankzij Nib een geweldige bibliotheek van mixins met Stylus niet missen.
Het "StylusCompiler" -pakket dat ik je heb verstrekt, wordt automatisch geïnstalleerd (dankzij grunt-contrib-stylus) en bevat penpunten in je project, dus je hoeft geen verdere stappen te nemen om het te gebruiken.
Nib biedt mixins voor alle CSS3-effecten die u zou verwachten, die elk naadloos kunnen worden aangeroepen als met behulp van een standaard CSS-eigenschap. Het bevat ook een indrukwekkende reeks mixins voor andere functies zoals positionering, resetten / normaliseren, clearfixing, responsieve beelden en meer.
Bekijk de documentatie voor een volledig overzicht hier: http://visionmedia.github.io/nib/
Notitie: Een tweede mixin bibliotheekoptie voor Stylus is Axis.
Stylus heeft tal van andere geweldige functies, gedaan op zijn eigen unieke en super schone manier, en je zou hier echt de hele boel moeten bekijken: http://learnboost.github.io/stylus/
Er zijn echter een paar in het bijzonder waar ik echt van hou.
Met restparameters kun je een onbepaald aantal waarden aan een mixin doorgeven zonder ze expliciet in kaart te hoeven brengen bij het maken van de mixin. U kunt een bepaalde waarde eruit halen en vervolgens de "rest" doorgeven met args ... en args. Bijvoorbeeld:
Soms herhaalt u een bepaalde waarde een aantal keer, maar alleen binnen een enkele stijl, dus als u een variabele moet declareren om deze vast te houden, kan dit te gek zijn.
Met de eigenschap opzoekfunctie kunt u de waarde opzoeken van elke eigenschap die u in dezelfde stijl of in een bovenliggende stijl hebt aangegeven. Bijvoorbeeld:
Het enige wat u hoeft te doen is de @ symbool voor de eigenschap die u wilt opzoeken. Stylus ziet er eerst in dezelfde stijl uit en als het geen overeenkomst vindt, zal het de ouder controleren en blijven bubbelen totdat het een overeenkomst krijgt of de documentroot bereikt en "null" retourneert.
Hopelijk voel je je nu gereed om het opzetten van Stylus aan te pakken als je eerder op de hoogte bent geweest van de opdrachtregel en je bent nieuwsgierig genoeg om te onderzoeken of je van de kracht van Sass houdt, maar liever met Node.js werkt dan Ruby. En zelfs als geen van deze twee bijzonder relevant voor je is, hoop ik dat je genoeg geïntrigeerd bent door enkele van de unieke benaderingen van Stylus om het te laten draaien en er een spel mee te maken.
Ter afsluiting wil ik graag een lijst met interessante Stylus-gerelateerde artikelen achterlaten, zodat je een kijkje kunt nemen, waarvan sommige in het bovenstaande worden genoemd, evenals enkele extra's.
Genieten!
Accentsconagua