Varför väljer jag Stylus (och du borde också)

Världen av front-end webbutveckling har ständigt ökat sitt upptag av vad vi kallar "CSS Preprocessors", vilket utökar funktionaliteten hos vanlig CSS. Förmodligen är de två mest kända, med den största användarbasen, mindre och Sass / SCSS. Men det finns en tredje förprocessor som inte har fått lika mycket uppmärksamhet, och det är Stylus.

Idag diskuterar vi varför Stylus är fantastisk, varför jag väljer det, och varför det kan bli din nya CSS-hjälte.


Varför MINDER och SASS är fantastiska

Innan vi kommer in i detaljerna om hur Stylus fungerar, ska jag börja med att ta de dominerande styrkorna LESS och Sass / SCSS, och varför jag väljer varken trots att de båda rockar.

Alla Tre Rock

Var och en av de tre förprocessorerna innefattar användningen av variabler, mixins, nestning och förlängning, tillsammans med varierande grader av logiska operationer och funktioner. Så alla tre är desamma, eftersom de låter dig sammanfatta viktiga designelement, använda logik och skriva mindre kod, vilket gör att alla kan ge dig stora vinster över rå CSS när de används bra.

Men med alla tre är desamma i denna grundläggande mening är det de sätt de är olika som i slutändan leder till ditt val att använda.

MINDER: Andra skäl Det är bra

För mig är den största styrkan utanför de aspekter som är gemensamma för alla tre förprocessorer samhället kring LESS och de erbjudanden som skapas av dem.

Det mest kända projektet med mindre är Twitter Bootstrap-ramverket, och min gissning är att önskan att arbeta med det är en stor del av det som leder många människor i sin tur till MINDRE.

Ett annat utkik är LESShat mixin-biblioteket, vilket ger ett utmärkt utbud av mixins för CSS3-effekter och mer, och dess partner CSShat-plugin för Photoshop, vilket genererar kopiera och klistra in LÄST kod från PSD-element. I synnerhet skapar dessa två saker i tandem ett mycket kraftfullt arbetsflöde vilket är fantastiskt om du gör mycket av din designprocess inom Photoshop.

Och ytterligare ett stort plus för MINDRE är det faktum att de flesta tycker att det är ganska lätt att använda. Du kan använda en enkel JavaScript-fil för att kompilera den på flyg, du kan använda en IDE med inbyggd kompilering som CrunchApp (eller CodeKit på Mac) eller du kan använda Node.js på din lokala maskin för en mer robust / flexibel kompileringslösning.

MINDER: Varför använder jag fortfarande inte den

Jag föredrar alltid min egen kod över tredje parts ramar, och jag tenderar också att göra minimal Photoshop-design dessa dagar, och föredrar att utforma dynamiskt i webbläsaren så mycket som möjligt. (CSSHat kan också matas ut på flera språk). Så för mig, lika stora som de projekt jag beskrivit är de ensamma inte tillräckligt för att tvinga mig att välja LESS som min gå till preprocessor.

Men den största anledningen till att jag inte använder LESS är faktiskt den betydande bukten i tillgängliga logikbehandlingsfunktioner mellan den och de andra två stora förprocessorerna.

Tyvärr kan ju färre logikbaserade funktioner som är tillgängliga för användning, desto mindre kan vi skapa minimal, ren kod och den långsammare utvecklingen och efterföljande modifiering blir.

MINDRAR tillåter lite logik, men det är verkligen ganska begränsande jämfört med Stylus och Sass / SCSS. Du kommer att se varför i min beskrivning av vad som är häftigt om Sass.

Sass: Andra skäl Det är stort och kraftfullt

Sass har också en bra community med många stora projekt som är tillgängliga att använda. Där MINST har Twitter Bootstrap, har Sass ramar som Gumby och Foundation. Där mindre har mindre, har Sass mixin-bibliotek som Compass och Bourbon.

Men där det verkligen kommer i sig i jämförelse med LESS är dess kraftfulla förmåga att hantera logik. Där mindre är vad du kanske kallar förhöjd CSS, beter sig Sass mycket mer som ett komplett programmeringsspråk.

Sass kan till exempel skapa effektiva skriftliga villkorliga kontroller, vilket är särskilt användbart inom mixins.

I Sass kan du göra följande:

@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color;  @else gränsen: 0;  @if $ bg_on == true bakgrundsfärg: $ bg_color;  @else bakgrundsfärg: transparent; 

Denna mixin kontrollerar för att se om $ border_on är satt till Sann, och i så fall använder den $ border_color värde i utgången för gräns fast egendom. Om inte, faller det tillbaka vid inställningen av gräns egendom till 0.

Det kontrollerar sedan att se om $ bg_on är satt till Sann, och i så fall använder den $ bg_color värde i utgången för bakgrundsfärg fast egendom. Om inte, sätter den bakgrundsfärg egendom till transparent

Det betyder att beroende på värdena kan upp till fyra olika typer av utdata genereras från en enda mixin, dvs gränsen och bakgrunden både på, gränsen och bakgrunden både av, gränsen till och bakgrunden av, gränsen av och bakgrunden på.

Men i LESS finns det inga "if / else" kontroller, så ovanstående skulle inte vara möjligt. Det mesta du kan göra med LESS är att använda det som kallas "Bevakad Mixins", där en given mixin matas ut annorlunda baserat på en kontroll mot ett enda uttryck.

Så din mixin kunde kontrollera om @gränsa till parametern var inställd på Sann såhär:

.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) när (@border_on = true) border: 1px solid @border_color; 

Men för att det saknas "if / else" -funktionalitet har det inte heller möjlighet att kontrollera värdet av @bg_on, eller att ge ett alternativt värde för gräns egendom inom samma mixin.

För att uppnå samma logik som hanterades med en enda Sass mixin, skulle du behöva skapa fyra olika bevakade mixins med LESS, dvs en för varje möjlig kombination av @gränsa till och @bg_on värden, som så:

.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) när (@border_on = true) och (@bg_on = true) border: 1px solid $ border_color; bakgrundsfärg: @bg_color;  .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) när (@border_on = false) och (@bg_on = false) border: 0; bakgrundsfärg: transparent;  .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) när (@border_on = false) och (@bg_on = true) border: 0; bakgrundsfärg: @bg_color;  .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) när (@border_on = true) och (@bg_on = false) border: 1px solid @border_color; bakgrundsfärg: transparent; 

Och det är bara med två värden att kontrollera; Antalet ökar med varje värde som du vill köra logik på, vilket kan bli väldigt svårt eftersom du vill skapa mer sofistikerade mixins. Det är också en svår process att överväga alla möjliga permutationer av variabla kombinationer för att kunna redogöra för dem alla.

Det är bara ett exempel på varför förbättrad logik gör livet mycket enklare med Sass vs. LESS, men det finns många fler. Sass erbjuder också utmärkt iterationsförmåga genom sin @för, @varje och @medan direktiven.

Och slutligen, mycket viktigare, medan MINST har några utmärkta inbyggda funktioner, gör Sass det väldigt enkelt att skriva egna. De är helt enkelt skrivna som:

@funktionsfunktionsnamn ($ parameter) @return $ dosomething + $ parameter / $ somethingelse; 

Dessa logiska funktioner öppnar en värld av möjligheter till saker som att skapa egna layoutmotorer, px till hantering, färgmodifierare och genvägar för ett oändligt antal saker som du kanske tycker att du behöver från projekt till projekt.

Från allt jag har läst och hört folk chatta om, och från min egen erfarenhet är det denna kraftigt förbättrade logiska kraft som är den viktigaste drivrutinen för att människor väljer Sass över LESS.

Sass: Varför jag inte använder det även om det är fantastiskt

Med mindre uteslutet för de flesta projekt på grund av sin begränsade logiska verksamhet, kommer det ner till ett val mellan Sass och Stylus, som båda har ett brett utbud av funktioner tillgängliga.

Och mellan de två väljer jag Stylus. Stylus har kraften i Sass, med tillgängligheten av LESS.

Stylus.js gör allt jag behöver som Sass gör, men det behöver bara JavaScript eller Node.js att kompilera. Dessutom har det ett speciellt sätt att fungera som är smidigt och lätt att arbeta med, och det har en vacker ren syntax som jag föredrar.

För mig är kravet på att springa Ruby on Rails och handla med ädelstenar ett viktigt vägspärr att vilja arbeta med Sass. Ruby är inte en del av något av de projekt jag utvecklar, så det enda jag någonsin har att göra med att installera det och några ädelstenar är att bara hantera Sass. Det är en uppsättning anslutningsfel och installationsproblem som jag inte behöver om jag kan undvika det.

Jag misstänker att många andra människor också är i samma båt om att inte annars använda Ruby, och inte särskilt vill att för att kunna använda en CSS preprocessor.

Även om jag behöver installera Ruby för att kunna använda Sass, tycker jag fortfarande att jag behöver arbeta med Node.js och NPM för att kunna använda Grunt för att hantera andra aspekter av mina projekt, till exempel att titta på förändringar, kombinera och minska JavaScript och så vidare, liksom Bower för annan pakethantering.

Notera: Det finns ett program som heter Scout for Mac och Windows, som hanterar kompilering för dig, men igen, där det är möjligt, föredrar jag att undvika att installera något för enbart ändamål, i stället för att arbeta med verktyg som jag kan använda för flera ändamål. Det finns också CodeKit, men det är bara Mac.

Så när det finns en preprocessor som Stylus som har all den logiska kraften jag behöver, men kan enkelt användas med min föredragna IDE och existerande Node.js-inställning eller ren JavaScript, är det bara meningsfullt att välja det.

Många människor hittar installationsprocessen för Sass avskräckande på grund av Ruby-faktorn och väljer LESS av den anledningen. Men jag finner att den enkla inställningen för Stylus är väsentligen i nivå med MINDRE, samtidigt som jag ger mig en helhet av logisk funktionalitet.

Men det handlar inte bara om Ruby, eller till och med bara den logiska funktionaliteten som finns tillgänglig. Det handlar också om det specifika sättet Stylus fungerar och den syntax det använder, vilket jag tycker är otroligt rent, flexibelt och jämnt i jämförelse med både LESS och Sass.

Så nu, låt mig berätta varför jag väljer Stylus, och varför det kan vara din nya CSS-hjälte.


Varför väljer jag Stylus

Som jag har berört ovan väljer jag Stylus för dess:

  • Kraftfull logisk funktionalitet
  • Förmåga att köra via Node.js / JavaScript, (ingen Ruby)
  • Förmåga att köra som en del av Node.js setup Jag skulle ändå ha för att kunna använda Grunt och Bower.
  • Ren och minimal men ändå flexibel syntax
  • En generell jämnhet i vägen när Stylus närmar sig sina olika funktioner

För att verkligen visa dig varför alla ovanstående gör att jag väljer Stylus, måste vi hoppa in och börja använda den lite så att jag kan visa dig exakt vad jag pratar om.


Låt oss börja med de största hindren som människor tränger in med CSS-förprocessorer, oberoende av vilken de väljer, och det är setup och sammanställning.

En stor del av varför jag väljer Stylus är att jag kan sätta upp den som en del av mina regelbundna projektskapande metoder, och därmed kan jag använda den med min favorit IDE. Låt mig visa dig hur.


Stylus Setup och Compilation

Ja, det finns några kommandoradsprocesser som är inblandade, men ta det från någon som aldrig hade använt kommandoraden för en sak innan förprocessorer krävde det - det är ingenstans så svårt som du tror, ​​och med kommandoraden får du dig att känna tio procent smartare än du gjorde tidigare. :)

Som sagt har jag lagt ihop ett paket som du kan ta tag i genom att klicka på knappen "Ladda ner" ovanför den här artikeln, vilket innebär att du knappt måste tänka på kommandoraden om du är på Windows. Bara några dubbelklick och du kommer att vara igång.

Om du är på Mac eller Linux, frukta inte, eftersom det bara finns tre kommandon måste du springa för att använda paketet, jag går igenom dig, och de är super lätta.

Det här paketet kommer att titta på dina källa Stylus-filer för ändringar, och det kommer att kompilera dem i CSS-filer för dig. Du kan använda den med vilken IDE du vill, vilket är en stor fördel med detta specifika tillvägagångssätt.

För mig personligen är det den episkt häftiga Sublime Text 2. Det är också den IDE som jag rekommenderar för att använda med Stylus på grund av det utmärkta Stylus-syntaxhöjdspaketet tillgängligt för det, vilket jag täcker under.

Steg 1: Installera Node.js

Node.js är ganska mycket ett måste ha i dessa dagar för front end webbutveckling. Det finns så många fantastiska verktyg som fungerar ovanpå det, så installationen får dig att etablera dig inte bara för Stylus utan också för många andra saker.

Gå till http://nodejs.org/download/ och ladda ner installationsprogrammet för ditt operativsystem.

Kör installationsprogrammet som du skulle någon annan för att lägga Node.js på ditt system.


Steg 2: Installera Grunt

Grunt är ett otroligt verktyg för att köra JavaScript-uppgifter. Du kan använda det för över tvåtusen olika ändamål via dess pluginprogram, listade här: http://gruntjs.com/plugins

I vårt fall kommer vi att använda den för att titta på våra Stylus-filer och sammanställa dem till CSS när de ändras.

Förbered dig för din första smak av kommandoraden, så öppna ett kommandofönster / terminal.

På Windows hittar jag det enklaste sättet att bara öppna Windows Explorer, och sedan inne i någon mapp, håll ner SHIFT-tangenten och högerklicka. På snabbmenyn ser du "Öppna kommandofönster här", som du ska klicka på:


Alternativt kan du klicka på "Start" -knappen och sedan söka efter "cmd" och tryck på ENTER för att hämta kommandofönstret.

Om du är på Linux, antar du att du förmodligen redan vet hur du öppnar en terminal, men om inte här är en guide till hur på de olika distroserna: https://help.ubuntu.com/community/UsingTheTerminal

Och om du är på Mac, ta en titt på en designerens introduktion till kommandoraden.

Skriv nu följande kommando och tryck på ENTER:

npm installera -g grunt-cli

Du får se en text som den här visas i fönstret:


Vänta tills allt är klart och en ny kommandotolk visas. Det betyder att installationen är klar och du kan sedan stänga kommandofönstret / terminalen. Du behöver bara göra det här en gång, eftersom det kommer att installera Grunt på ditt system med global åtkomst så att du kan använda den från en framtida projektmapp du konfigurerar.

Nu är du redo att installera ett verkligt projekt med hjälp av StylusCompiler-paketet som jag har angett. Detta är processen du ska repetera för varje nytt designprojekt du börjar.


Ett stylusprojekt

Låt oss ta detta steg för steg.

Steg 1: Konfigurera en projektmapp

Skapa en mapp för att hysa ditt projekt. För den här demoen ska vi bara ringa den EGProject.

Inuti det skapar du en andra mapp som heter css. Det här är den mapp som dina CSS-filer kommer att skrivas in i.

Nu extrahera StylusCompiler.zip filen i den här mappen.

Du borde sluta med en struktur som ser ut så här:


Steg 2: Installera StylusCompiler

Gå in i StylusCompiler mappen och, om du är på Windows, dubbelklickar du på filen som heter double_click_to_install.bat.

Om du inte är på Windows, öppna en terminal i StylusCompiler mapp, (eller öppna en terminal och navigera sedan / cd till mappen). Skriv följande och tryck sedan på ENTER:

npm installera
Detta installerar kompilatorn i din projektmapp. Återigen ser du en massa saker som detta kommer upp i fönstret: Om du är på Windows och dubbelklickat på .bat-filen stängs fönstret när installationen har slutförts. Om inte, vänta tills texten stannar och en ny kommandotolk visas. Håll din terminal öppen för nästa steg.

Steg 3: Aaaaaand Engage!

Nu behöver du bara initiera funktionen "klocka" som projektet har konfiguration att använda via Grunt. Detta kommer att se på nål mapp inuti StylusCompiler mapp för ändringar till någon .styl filer i den. 

Skapa bara alla Stylus-filer du behöver i det nål mapp och du är bra att gå. Notera: Alla dina Stylus-filer måste ha .styl filtillägg. När ändringar sparas i några filer i den mappen kommer paketet sedan att kompilera din Stylus-kod i CSS och skriva den i en fil med namnet style.css i css mapp på ditt projekt. Fortfarande i StylusCompiler mapp, om du är på Windows dubbelklickar du på filen som heter watch_and_compile.bat

 Om du inte är på Windows, med din terminal fortfarande i StylusCompiler mapp, skriv följande och tryck sedan på ENTER:

grunt klocka

Du bör se detta i kommandofönstret / terminalen:


Nu om du sparar ändringar i någon fil i StylusCompiler> stylus mapp (så länge du inte har gjort några fel i din kod) ser du följande:


När du är färdig med att arbeta med dina Stylus-filer kan du bara stänga kommandofönstret / terminalen eller om du behöver köra ett annat kommando kan du trycka på CTRL + C för att stoppa uppgiften "titta".


Valfria steg

Ändra projektalternativ

En av anledningarna till att jag älskar att arbeta med den här typen av projektinställningar är att du är i full kontroll, så du kan ställa upp ditt projekt men du gillar det och ändra när som helst. Om du vill ändra saker som utmatningsmappen för din css, kan filnamnet, om CSS komprimeras eller inte, och så vidare, göra det i filen som heter Gruntfile.js i StylusCompiler mapp.

Vi använder Grunt-Contrib-Stylus-plugin för Grunt för att hantera kompilering, så att du kan få en fullständig översikt över alla möjliga konfigurationer för det här: https://github.com/gruntjs/grunt-contrib-stylus.

Men här är de viktigaste alternativen du sannolikt vill ha.


  • Linje 20, komprimera CSS-utgången eller inte

    Ställ in komprimera alternativ till Sann för produktionsklar förminskad CSS, eller till falsk för utökad CSS medan du fortfarande är i utveckling.

  • Linje 27, ställ in CSS-utgångsfilnamn

    Standardfilnamnet som kommer att skrivas till är "style.css". Om du vill att filen ska namnges något annat, ersätt "style.css" med ditt val på den här raden.

  • Linje 32, CSS utgångsläge

    Som standard ser kompilatorn upp en nivå från StylusCompiler mapp och skriv in i css mapp däri.

Om du vill att dina CSS-filer ska skrivas någon annanstans, ändra värdet på den här raden från '... / css' till din föredragna plats.

Arbetar med Sublime Text 2 och Stylus

Som jag nämnde ovan är skönheten i detta tillvägagångssätt att du kan använda någon IDE alls för att redigera dina Stylus-filer och de kommer att sammanställa precis samma. Men jag rekommenderar starkt att använda Sublime Text 2 som Stylus-syntaxprimeringspaketet tillgängligt för att det fungerar med Stylus en glädje.

Du kan ladda ner Sublime Text 2 här: http://www.sublimetext.com/2.

Efter nedladdning och installation, besök den här sidan och följ anvisningarna för att installera "Paketkontroll", den briljanta pakethanteraren för Sublime Text: https://sublime.wbond.net/installation#st2

Slutligen installera Stylus syntax highlight-paketet. Öppna Paketkontroll genom att gå till Inställningar> Paketstyrning som så:


I listan som visas klickar du på alternativet "Installera paket" och väntar några sekunder medan en lista över tillgängliga paket hämtas:


Skriv "stylus" i fältet ovanför listan över paket för att söka efter det och klicka sedan på resultatet med titeln "Stylus" för att installera det:


Detta paket kommer nu att bli svårt att läsa, vanlig CSS-formatering så här:


... till lätt differentierad Stylus formaterad kod så här:



Stylus Syntax

En av de saker jag absolut älskar om Stylus är dess totala flexibilitet på syntaxen.

Med LESS måste all kod skrivas på samma sätt som du skulle skriva regelbunden CSS, dvs du måste inkludera lockiga hängslen, kolon och semikolon på samma sätt som du skulle ha i CSS.

Med Sass / SCSS har du ett val:

  • Du kan ställa in ett kompileringsalternativ i ditt projekt för att använda SCSS-syntaxen, i vilket fall du skriver som du skulle regelbundet CSS, eller...
  • Du kan välja Sass-syntaxen, i vilket fall du kan utelämna lockiga hängslen och semikolon till förmån för att använda fläckindikationer och nya linjer, men du kommer inte att kunna använda vanlig CSS-syntax i samma fil.

Stylus å andra sidan är helt flexibel, och du behöver inte ställa in några kompileringsalternativ för att hantera hur du vill skriva.

  • Du kan skriva i vanlig CSS-syntax med lockiga fästen och arbeten om det är så du känner dig bekväm.
  • Eller, du kan släppa lockiga hängslen, kolon och semikolon tillsammans. Där krullningsbygelar normalt skulle vara används istället en flikindragning. Där en semikolon normalt skulle vara används en ny linje. Och där ett kolon normalt skulle vara, gör ett enkelt utrymme jobbet.
  • Och inte bara kan du använda antingen tillvägagångssätt, men du kan även kombinera dem i samma fil.

Alla dessa exempel sammanställs i Stylus, och synpunkterna kan användas tillsammans i samma dokument:


Endast Stylus möjliggör utelämnandet av alla dessa syntaxelement, i varierande grad, och kombinationen "på flugan" av dessa tillvägagångssätt så att du kan göra vad du tycker om när ditt projekt rör sig längs.

Denna funktionalitet är fantastisk för utveckling. Du kommer bli förvånad över att hitta hur mycket större ditt flöde är när du släpper bort alla synpunkter som du kan göra. Din kodning och din tankeprocess när du flyttar kommer att bli så mjukare. Och med den syntaxmarkering som tillhandahålls av paketet som vi installerat tidigare, hittar du din kod kommer att vara lika läsbar.

Men samtidigt är kompilering mycket förlåtande. Om du av en eller annan anledning bestämmer att regelbundet CSS-syntax kommer att göra en del av ditt dokument bättre organiserat kan du gå direkt och använda det när du vill. Och om du av misstag missar en semikolon här eller där, tänker ingen.


Stylusvariabler, Mixins, Conditionals och Funktioner

Du såg några exempel på hur variabler, mixins, villkorliga kontroller och funktioner ser ut i LESS och Sass. Till mitt öga finner jag Stylus-tillvägagångssättet för dessa lättare att titta på, läsa och arbeta med i allmänhet.

I MINDER måste variablerna läggas upp med @ symbol. I Sass måste de föras upp med $ symbol. Men i Stylus behöver en variabel inte föras upp med någonting alls.

Notera: Du kan valfritt använda $ symbol om du föredrar, men inte den @ symbol eftersom detta är reserverat för andra ändamål i Stylus.

På samma sätt behöver mixins, villkorliga kontroller och funktioner inte förhängas med något i Stylus.

I MINDER måste en mixin skrivas på samma sätt som du skulle skriva en vanlig CSS-klass, och det finns inga villkorliga kontroller eller anpassade funktioner.

I Sass måste mixiner vara upplagda med @blanda i och ringde med @inkludera, villkorliga kontroller skrivs som @om och @annan, och funktioner måste läggas upp med @fungera och inkludera en linje införd med @lämna tillbaka.

Ingen av dessa saker krävs i Stylus. Du kan helt enkelt skriva naturligt som du kanske på vanligt språk. Till exempel tidigare använde vi detta exempel Sass mixin och funktion:

@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color;  @else gränsen: 0;  @if $ bg_on == true bakgrundsfärg: 1px solid $ bg_color;  @else bakgrundsfärg: transparent; 
@funktionsfunktionsnamn ($ parameter) @return $ dosomething + $ parameter / $ somethingelse; 

Denna mixin och funktion skulle kallas så här:

.callem @ include border_and_bg (true, # 000, true, #fff); fontstorlek: funktionsnamn (6); 

I Stylus kan dessa skrivas och kallas enligt följande:


Detta för mig är väldigt snyggt, lätt att läsa och skriva och hålla ihop med förprocessorns mål att göra koden ren och minimal.

Tänk också på att i det ovanstående exemplet har jag utelämnat all syntax "interpunktion" som kan utelämnas, det är helt frivilligt hur mycket du vill lämna ut i din utveckling.

Till exempel har jag kallat border_and_bg mixin sömlöst, skriva det i huvudsak på samma sätt som jag skulle ha en vanlig CSS-egenskap, utan några parentes runt parametrarna eller kommatecken mellan dem. Men om du föredrar att du kan inkludera parenteser och kommatecken när du ringer mixins är det helt upp till dig.


Nib Mixin Library

En av de bästa sakerna att arbeta med Sass och LESS är Compass / Bourbon och LESShat mixinbibliotek. Men du kommer inte att sakna ett fantastiskt bibliotek av mixins med Stylus, tack vare Nib.

Paketet "StylusCompiler" Jag gav dig automatiskt installationer (tack vare Grunt-Contrib-stylus) och innehåller Nib i ditt projekt, så du behöver inte göra några ytterligare steg för att kunna använda det.

Nib ger mixins för alla CSS3-effekter du kan förvänta dig, var och en kan kallas sömlöst som om du använder en vanlig CSS-egenskap. Det innehåller också en imponerande mängd mixins för andra funktioner som positionering, återställning / normalisering, clearfixing, responsiva bilder och mer.

Kolla in dokumenten för en fullständig översyn här: http://visionmedia.github.io/nib/

Notera: Ett andra mixin bibliotek alternativ för Stylus är Axis.


Annan kärleksfull stil godhet

Stylus har massor av andra fantastiska funktioner, gjort på sin egen unika och super rena sätt, och du borde verkligen kolla in hela partiet här: http://learnboost.github.io/stylus/

Det finns emellertid ett par i synnerhet som jag verkligen älskar.

Vila Parametrar

Vila parametrar tillåter dig att skicka ett obestämt antal värden till en mixin utan att behöva explicit kartlägga dem i skapandet av mixin. Du kan dra ut ett visst värde och sedan passera "vila" med hjälp av args ... och args. Till exempel:


Fastighetssökning

Ibland kan du upprepa ett visst värde ett par gånger, men bara inom en enda stil, så att behöva deklarera en variabel för att hålla det kan vara överkill.

Med egenskapsuppslagfunktionen kan du leta upp värdet på alla objekt du har deklarerat i samma stil eller i en förälderstil. Till exempel:


Allt du behöver göra är att använda @ symbol för den egendom du vill leta upp. Stylus kommer att se först i samma stil och om den inte hittar någon match kontrollerar den föräldern och fortsätter att bubbla tills den antingen får en match eller når dokumentrotten och returnerar "null".


Wrapping Up & Some Final Stylus Goodies

Förhoppningsvis känner du dig nu redo att ta itu med att ställa in Stylus om du har varit försiktig med kommandoraden innan och du är nyfiken nog att undersöka om du älskar Sass, men föredrar att arbeta med Node.js över Ruby. Och även om ingen av dessa två är särskilt relevanta för dig, hoppas jag att du är fascinerad nog av några av de unika sätt som Stylus har att spinna upp och spela med det.

För att pakka upp, skulle jag vilja lämna dig en lista med intressanta Stylus-relaterade godsaker för att du ska ta en titt, några som nämns ovan, liksom några extrafunktioner.

Njut av!

  • Stylus Docs
  • Sass vs LESS vs Stylus: Preprocessor Shootout
  • Nib: CSS3 förlängningar för Stylus
  • Axis mixin bibliotek
  • Semantic Grid System-responsiva Stylus grid mixins
  • Jeet: Responsive Grid System på Stylus
  • Arbeta med Jeet: ett alternativt ansvarsfullt ramverk
  • Flytande: CSS3 och HTML5 Framework
  • bootstrap3-stylus: en Stylus-port i Twitter Bootstrap-ramen
  • bootstrap-stylus: en annan Twitter Bootstrap-port