Share
Verden av frontend webutvikling har jevnt økt opptaket av det vi kaller "CSS Preprocessors", noe som forlener funksjonaliteten til vanlig CSS. Kanskje de to mest kjente, med den største brukerbasen, er LESS og SASS / SCSS. Men det er en tredje preprosessor som ikke har fått like mye oppmerksomhet, og det er Stylus.
I dag skal vi diskutere hvorfor Stylus er kjempebra, hvorfor jeg velger det, og hvorfor det kanskje bare blir din nye CSS-helt.
Før vi kommer inn i detaljer om hvordan Stylus fungerer, skal jeg begynne med min egen ta på de overordnede styrken til LESS og SASS / SCSS, og hvorfor jeg velger ingen, selv om de begge rocker.
Hver av de tre preprosessorer inkluderer bruk av variabler, mixins, nesting og forlengelse, sammen med varierende grad av logiske operasjoner og funksjoner. Så alle tre er de samme, ved at de lar deg abstrahere viktige designelementer, bruke logikk og skrive mindre kode, noe som gjør at alle kan gi deg gode gevinster i forhold til rå CSS når de brukes godt.
Men med alle tre er de samme i denne grunnleggende forstanden, er det måtene de er forskjellige som til slutt vil føre til ditt valg som du skal bruke.
For meg er den største styrken utenfor de aspekter som er felles for alle tre forprosessorer, fellesskapet rundt MINDRE og tilbudene som er skapt av dem.
Det mest kjente prosjektet med mindre er Twitter Bootstrap-rammen, og mitt gjetning er ønsket om å jobbe med det, og det er en stor del av det som fører mange mennesker til sin tur til MINDRE.
En annen skiller seg ut er LESShat mixin-biblioteket, som gir et utmerket utvalg av mixins for CSS3-effekter og mer, og dets partner CSShat plugin for Photoshop, som genererer kopi og lim inn LESS-kode fra PSD-elementer. Spesielt disse to elementene i tandem skaper en veldig kraftig arbeidsflyt som er fantastisk hvis du gjør mye av designprosessen din i Photoshop.
Og enda et stort plus for MINDRE er det faktum at de fleste finner det ganske tilgjengelig for bruk. Du kan bruke en enkel JavaScript-fil til å kompilere den på fly, du kan bruke en IDE med innebygget kompilering som CrunchApp (eller CodeKit på Mac), eller du kan bruke Node.js på din lokale maskin for en mer robust / fleksibel kompileringsløsning.
Jeg foretrekker alltid min egen kode over tredjepartsrammer, og jeg har også en tendens til å gjøre minimal Photoshop-design i disse dager, og foretrekker å designe dynamisk i nettleseren så mye som mulig. (CSSHat kan også skrive ut på flere språk). Så for meg, så godt som de prosjektene jeg beskrev, er de alene ikke nok til å tvinge meg til å velge MINDRE som min gå til preprosessor.
Men den største grunnen til at jeg ikke bruker MINDRE er faktisk den betydelige golfen i tilgjengelige logikkbehandlingsfunksjoner mellom den og de andre to store preprosessorer.
Dessverre, jo færre logikkbaserte funksjoner som er tilgjengelige for bruk, jo mindre er vi i stand til å lage minimal, ren kode, og den langsommere utviklingen og påfølgende modifikasjon vil bli.
MINDRE tillater noe logikk, men det er egentlig ganske begrenset i forhold til Stylus og Sass / SCSS. Du vil se hvorfor i min beskrivelse av hva som er fantastisk om Sass.
Sass har også et flott samfunn med mange flotte prosjekter tilgjengelig for bruk. Hvor MINST har Twitter Bootstrap, har Sass rammer som Gumby og Foundation. Hvor mindre har mindre, har Sass blandebiblioteker som Compass og Bourbon.
Men der det egentlig kommer til seg i forhold til LESS, er det en kraftig evne til å håndtere logikk. Hvor mindre er det du kan kalle forbedret CSS, oppfører Sass mye mer som et komplett programmeringsspråk.
Sass lar deg for eksempel lage effektive skriftlige betingede kontroller, noe som er spesielt nyttig innen mixins.
I Sass kan du gjøre følgende:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else grense: 0; @if $ bg_on == true bakgrunnsfarge: $ bg_color; @else bakgrunnsfarge: gjennomsiktig;
Denne blandingen sjekker for å se om $ border_on er satt til ekte, og i så fall bruker den $ border_color verdi i utgangen for grense eiendom. Hvis ikke, faller det tilbake ved å sette inn grense eiendom til 0.
Det sjekker også for å se om $ bg_on er satt til ekte, og i så fall bruker den $ bg_color verdi i utgangen for bakgrunnsfarge eiendom. Hvis ikke, setter den bakgrunnsfarge eiendom til gjennomsiktig
Dette betyr at, avhengig av verdiene som er gått, kan opptil fire forskjellige typer utdata genereres fra en enkelt mixin, dvs. grense og bakgrunn både på, kant og bakgrunn både av, grense på og bakgrunn av, grense av og bakgrunn på.
Men i MINDRE er det ingen "if / else" sjekker, slik at ovennevnte ikke ville være mulig. Det meste du kan gjøre med MINDRE, er å bruke det som kalles "Guarded Mixins", hvor en gitt mixin er utgang forskjellig basert på en kontroll mot et enkelt uttrykk.
Så mixin kan sjekke om @border_on parameteren ble satt til ekte som så:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) når (@border_on = true) border: 1px solid @border_color;
Men fordi det mangler "if / else" -funksjonalitet, har det heller ikke muligheten til å kontrollere verdien av @bg_on, heller ikke å gi en alternativ verdi for grense eiendom innenfor samme mixin.
For å oppnå samme logikk som ble håndtert med en enkelt Sass mixin, må du opprette fire forskjellige beskyttede mixins med LESS, dvs. en for hver av de mulige kombinasjonene av @border_on og @bg_on verdier, slik som:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) når (@border_on = true) og (@bg_on = true) border: 1px solid $ border_color; bakgrunnsfarge: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) når (@border_on = false) og (@bg_on = false) border: 0; bakgrunnsfarge: gjennomsiktig; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) når (@border_on = false) og (@bg_on = true) border: 0; bakgrunnsfarge: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) når (@border_on = true) og (@bg_on = false) border: 1px solid @border_color; bakgrunnsfarge: gjennomsiktig;
Og det er bare med to verdier å sjekke; tallet øker med hver verdi som du vil kjøre logikk på, som kan bli svært uhåndterlig når du vil lage mer sofistikerte mixins. Det er også en vanskelig prosess å vurdere alle mulige permutasjoner av variable kombinasjoner for å kunne regne for dem alle.
Det er bare ett eksempel på hvor forbedret logikk gjør livet mye lettere med Sass vs. LESS, men det er mange flere. Spesielt tilbyr Sass også gode iterasjonsevner gjennom sin @til, @Hver og @samtidig som direktiver.
Og til slutt, enda viktigere, mens LESS har noen gode innebygde funksjoner, gjør Sass det veldig enkelt å skrive din egen. De er bare skrevet som:
@funksjon-funksjonsnavn ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Disse logiske funksjonene åpner en mulighet for ting som å lage dine egne layoutmotorer, px til embehandling, fargemodifiseringer og snarveier for et uendelig antall ting du kan finne deg selv som trenger fra prosjekt til prosjekt.
Fra alt jeg har lest og hørt folk chatte om, og fra min egen erfaring, er det denne kraftig forbedrede logiske kraften som er hoveddriveren for folk som velger Sass over MINDRE.
Med mindre utelukkende for de fleste prosjekter på grunn av sin begrensede logiske operasjoner, kommer det ned til et valg mellom Sass og Stylus, som begge har et kraftig utvalg av funksjoner tilgjengelig.
Og mellom de to velger jeg Stylus. Stylus har kraften til Sass, med tilgjengeligheten til LESS.
Stylus.js gjør alt jeg trenger som Sass gjør, men det krever bare JavaScript eller Node.js å kompilere. Dessuten har den en bestemt måte å operere på som er jevn og lett å jobbe med, og den har en vakker ren syntaks som jeg foretrekker.
For meg er kravet om å kjøre Ruby on Rails og håndtere edelstener en viktig veisklokke for å jobbe med Sass. Ruby er ikke en del av noen av prosjektene jeg utvikler, så den eneste grunnen til at jeg noensinne har å gjøre med å installere den og noen edelstener, er bare å håndtere Sass. Det er et sett med tilkoblingsfeil og installasjonsproblemer jeg ikke trenger hvis jeg kan unngå det.
Jeg mistenker at mange andre mennesker også er i samme båt som ikke ellers bruker Ruby, og ikke spesielt ønsker å bruke en CSS preprosessor.
I tillegg, selv om jeg må installere Ruby for å kunne bruke Sass, finner jeg fremdeles at jeg trenger å jobbe med Node.js og NPM for å kunne bruke Grunt til å håndtere andre aspekter av prosjektene mine, for eksempel å se etter endringer, kombinere og minifisere JavaScript og så videre, samt Bower for annen pakkehåndtering.
Merk: Det er et program som heter Scout for Mac og Windows, som håndterer kompilering for deg, men igjen hvor det er mulig, foretrekker jeg å unngå å installere noe for et enkelt formål, i stedet for å jobbe med verktøy jeg kan bruke til flere formål. Det finnes også CodeKit, men det er bare Mac.
Så når det er en preprosessor som Stylus som har all den logiske kraften jeg trenger, men kan brukes lett med min foretrukne IDE og eksisterende Node.js-oppsett eller ren JavaScript, er det bare fornuftig å velge det.
Mange finner oppsettprosessen for Sass skremmende på grunn av Ruby-faktoren og velger LESS av den grunn. Men jeg finner ut at den enkle oppsettet for Stylus er i hovedsak på nivå med MINDRE, samtidig som jeg gir meg full spekter av logisk funksjonalitet.
Men det handler ikke bare om Ruby, eller bare den logiske funksjonaliteten som er tilgjengelig. Det handler også om den spesifikke måten Stylus fungerer på og syntaksen den bruker, som jeg synes å være utrolig ren, fleksibel og glatt i forhold til både LESS og Sass.
Så nå, la meg fortelle deg hvorfor jeg velger Stylus, og hvorfor det kan være din nye CSS-helt.
Som jeg har rørt på ovenfor, velger jeg Stylus for sin:
For å virkelig vise deg hvorfor alt ovenfor gjør at jeg velger Stylus, må vi hoppe inn og begynne å bruke den litt, så jeg kan vise deg nøyaktig hva jeg snakker om.
La oss starte med de største hindringene folk går inn i med CSS preprosessorer, hvilken av dem de velger, og det er oppsett og kompilering.
En stor del av hvorfor jeg velger Stylus er at jeg kan sette opp det som en del av mine vanlige prosjektopprettelsesmetoder, og dermed kan jeg bruke den med min foretrukne IDE. La meg vise deg hvordan.
Ja, det er noen kommandolinjeprosesser som er involvert, men ta det fra noen som aldri hadde brukt kommandolinjen til noe før preprosessorer krevde det - det er ikke så nært som vanskelig, og ved hjelp av kommandolinjen får du deg til å føle deg Ti prosent smartere enn du gjorde før. :)
Når det er sagt, har jeg satt sammen en pakke, som du kan hente ved å trykke på "Download" -knappen øverst i denne artikkelen, noe som vil bety at du knapt må tenke på kommandolinjen hvis du er på Windows. Bare noen få dobbeltklikk, og du vil bli oppe.
Hvis du er på Mac eller Linux, ikke vær redd, da det bare er tre kommandoer du må løpe for å bruke pakken, vil jeg gå deg gjennom hvordan, og de er super enkle.
Denne pakken vil se kilde Stylus-filer for endringer, og den vil kompilere dem i CSS-filer for deg. Du kan bruke den med hvilken som helst IDE du vil ha, noe som er en stor fordel av denne tilnærmingen.
For meg personlig er det den episk kjempebra Sublime Text 2. Det er også IDE jeg anbefaler for å bruke med Stylus på grunn av den utmerkede Stylus syntax høydepakken tilgjengelig for den, som jeg vil dekke under.
Node.js er ganske mye et must i disse dager for front end web utvikling. Det er så mange fantastiske verktøy som fungerer på toppen av det, så installering vil få deg etablert ikke bare for Stylus, men for mange andre ting også.
Gå til http://nodejs.org/download/ og last ned installasjonsprogrammet for ditt operativsystem.
Kjør installasjonsprogrammet som du ville noen andre å sette Node.js på systemet ditt.
Grunt er et utrolig verktøy for å kjøre JavaScript-oppgaver. Du kan bruke den i over to tusen forskjellige formål via pluginene, oppført her: http://gruntjs.com/plugins
I vårt tilfelle skal vi bruke den til å se våre Stylus-filer og kompilere dem til CSS når de endres.
Forbered deg på din første smak av kommandolinjen, så åpne et kommandovindue / terminal.
På Windows finner jeg den enkleste måten å bare åpne Windows Explorer, deretter inne i hvilken som helst mappe, hold nede SHIFT-tasten og høyreklikk. I kontekstmenyen ser du "Åpne kommandovinduet her", som du bør klikke på:
Alternativt kan du klikke på "Start" -knappen, deretter søke etter "cmd" og trykk ENTER for å hente opp kommandovinduet.
Hvis du er på Linux, gjetter jeg sikkert du allerede vet hvordan du åpner en terminal, men hvis ikke her er en veiledning til hvordan på de ulike distrosene: https://help.ubuntu.com/community/UsingTheTerminal
Og hvis du er på Mac, ta en titt på en designerens introduksjon til kommandolinjen.
Skriv inn følgende kommando og trykk ENTER:
npm installere -g grunt-cli
Du ser en last med tekst som dette vises i vinduet:
Vent til alt er ferdig og en ny ledetekst vises. Det vil bety at installasjonen er fullført, og du kan deretter lukke kommandovinduet / terminalen. Du trenger bare å gjøre dette en gang, da det vil installere Grunt på systemet ditt med global tilgang, slik at du kan bruke den fra en fremtidig prosjektmappe du konfigurerer.
Nå er du klar til å sette opp et faktisk prosjekt ved hjelp av StylusCompiler-pakken jeg har gitt. Dette er prosessen du vil gjenta for hvert nytt designprosjekt du begynner.
La oss ta dette trinnvis.
Lag en mappe for å huse prosjektet ditt. For denne demoen, kaller vi det bare EGProject.
Inne i det, lag en annen mappe som heter css. Dette er mappen din CSS-filer vil bli skrevet inn i.
Nå trekk ut StylusCompiler.zip filen i denne mappen.
Du bør ende opp med en struktur som ser slik ut:
Gå inn i StylusCompiler mappe, og hvis du er på Windows, dobbeltklikker du filen som heter double_click_to_install.bat.
Hvis du ikke er i Windows, åpner du en terminal i StylusCompiler mappe, (eller åpne en terminal og deretter navigere / cd til mappen). Skriv inn følgende og trykk deretter ENTER:
npm installasjonDette vil installere kompilatoren inne i prosjektmappen din. Igjen ser du en haug med ting som dette kommer opp i vinduet:
Hvis du er på Windows og dobbeltklikket på .bat-filen, lukkes vinduet når installasjonen er fullført. Hvis ikke, vent til teksten slutter å flytte og en ny kommandoprompt vises. Hold terminalen åpen for neste trinn. Nå er alt du trenger å gjøre, å starte "watch" -funksjonen som prosjektet har konfigurasjon for å bruke via Grunt. Dette vil se på pekepenn mappe inne i StylusCompiler mappe for endringer i noen .styl filer i den.
Bare opprett alle Stylus-filene du trenger i det pekepenn mappe og du er god til å gå. Merk: Alle stilusfilene dine må ha .styl filutvidelse. Når endringer er lagret i noen filer i den mappen, vil pakken kompilere Stylus-koden til CSS, og skrive den inn i en fil som heter style.css i css mappe av prosjektet ditt. Fortsatt i StylusCompiler mappe, hvis du er på Windows, dobbeltklikk filen som heter watch_and_compile.bat.
Hvis du ikke er på Windows, med terminalen din fortsatt i StylusCompiler mappe, skriv inn følgende og trykk deretter ENTER:
grunt ur
Du bør se dette i kommandovinduet / terminalen:
Nå hvis du lagrer endringer i en hvilken som helst fil i StylusCompiler> stylus mappe, (så lenge du ikke har gjort noen feil i koden din), ser du følgende:
Når du er ferdig med å jobbe med Stylus-filene dine, kan du bare lukke kommandolinjen / terminalen, eller hvis du trenger å kjøre en annen kommando, kan du trykke CTRL + C for å stoppe "watch" -oppgaven.
En av grunnene til at jeg elsker å jobbe med denne type prosjektoppsett er at du er i full kontroll, så du kan sette opp prosjektet ditt, men likevel, og endre når som helst. Hvis du vil endre ting som utdatamappen for din css, kan utdatafilenavnet, om CSS er komprimert eller ikke, og så videre, du gjøre det i filen som heter Gruntfile.js i StylusCompiler mappe.
Vi bruker Grunt-Contrib-stylus-plugin for Grunt til å håndtere kompilering, slik at du kan få full oversikt over alle mulige konfigurasjoner for det her: https://github.com/gruntjs/grunt-contrib-stylus.
Men her er de viktigste alternativene du sannsynligvis vil ha.
Sett komprimere alternativ til ekte for produksjonsklar forminsket CSS, eller til falsk for utvidet CSS mens du fortsatt er i utvikling.
Standardfilen som skal skrives til, er "style.css". Hvis du ønsker at filen skal bli navngitt noe annet, erstatt "style.css" med ditt valg på denne linjen.
Som standard ser kompilatoren opp ett nivå fra StylusCompiler mappe, og skriv inn i css mappe deri.
Hvis du vil at CSS-filene dine skal skrives et annet sted, endrer du verdien på denne linjen fra '... / css' til din foretrukne plassering.
Som nevnt ovenfor, er skjønnheten i denne tilnærmingen at du kan bruke noen IDE i det hele tatt til å redigere Stylus-filene dine, og de vil kompilere akkurat det samme. Men jeg anbefaler på det sterkeste å bruke Sublime Text 2 som Stylus syntax utheving pakken tilgjengelig for det gjør jobben med Stylus en glede.
Du kan laste ned Sublime Text 2 her: http://www.sublimetext.com/2.
Etter at du har lastet ned og installert, kan du besøke denne siden og følge instruksjonene for å installere "Pakkekontroll", den briljante pakkestyreren for Sublime Text: https://sublime.wbond.net/installation#st2
Endelig installerer du Stylus-syntax-høydepakken. Åpne pakkekontroll ved å gå til Innstillinger> Pakkekontroll slik:
I listen som vises, klikker du på "Installer pakke" -alternativet, og vent noen sekunder mens en liste over tilgjengelige pakker hentes:
Skriv "stylus" i feltet over listen over pakker for å søke etter det, og klikk deretter resultatet med tittelen "Stylus" for å installere det:
Denne pakken vil nå bli vanskelig å lese, vanlig CSS formatering som denne:
... til lett differensiert Stylus formatert kode som dette:
En av de tingene jeg absolutt elsker om Stylus, er total fleksibilitet på syntaks.
Med MINDRE må all kode skrives på samme måte som du vil skrive vanlig CSS, det vil si at du må inkludere krøllestifter, kolonner og semikolon på samme måte som du ville i CSS.
Med Sass / SCSS har du et valg:
Stylus derimot er helt fleksibel, og du trenger ikke å angi noen samlingsalternativer for å håndtere måten du vil skrive.
Alle disse eksemplene samles i Stylus, og tilnærmingene til syntaks kan brukes sammen i samme dokument:
Bare Stylus tillater utelatelse av alle disse syntakselementene, i varierende grad, og "på flukt" -kombinasjonen av disse tilnærmingene, slik at du kan gjøre det du føler deg som prosjektet beveger seg langs.
Denne funksjonaliteten er fantastisk for utvikling. Du vil bli overrasket over å finne ut hvor mye større strømmen din er når du slipper ut alle syntaksene "tegnsetting" du kan. Koding og tankeprosessen når du beveger deg, blir så mye jevnere. Og med syntaxuthevingen som tilbys av pakken vi installerte tidligere, finner du at koden din vil være så lett som lesbar.
Men samtidig er kompilering svært tilgivende. Hvis du av en eller annen grunn bestemmer at vanlig CSS-syntaks vil gjøre en del av dokumentet bedre organisert, kan du gå rett fram og bruke det når du vil. Og hvis du ved et uhell savner et semikolon her eller der, tenker ingen.
Du så over noen eksempler på hvordan variabler, mixins, betingede kontroller og funksjoner ser i LESS og Sass. Til mitt øye finner jeg Stylus-tilnærmingen til disse lettere å se på, lese og arbeide med generelt.
I LESS, må variabler bli prepended med @ symbol. I Sass må de være prepended med $ symbol. Men i Stylus trenger en variabel ikke å bli overført med noe i det hele tatt.
Merk: Du kan eventuelt bruke $ symbol hvis du foretrekker, men ikke @ symbol som dette er reservert for andre formål i Stylus.
På samme måte må mixins, betingede kontroller og funksjoner ikke bli prepended med noe i Stylus.
I MINDRE må en mixin skrives på samme måte som du ville skrive en vanlig CSS-klasse, og det er ingen betingede sjekker eller tilpassede funksjoner.
I Sass, mixins må være prepended med @mixin og ringte med @inkludere, betingede sjekker er skrevet som @hvis og @ellers, og funksjoner må være prepended med @funksjon og inkludere en linje prepended med @komme tilbake.
Ingen av disse tingene er nødvendig i Stylus. Du kan bare skrive naturlig som du kanskje i vanlig språk. For eksempel brukte vi tidligere dette eksemplet Sass mixin og funksjon:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else grense: 0; @if $ bg_on == true bakgrunnsfarge: 1px solid $ bg_color; @else bakgrunnsfarge: gjennomsiktig;
@funksjon-funksjonsnavn ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Denne mixin og funksjonen ville bli kalt slik:
.callem @include border_and_bg (sant, # 000, sant, #fff); skriftstørrelse: funksjonsnavn (6);
I Stylus kan disse skrives og kalles som følger:
Dette for meg er veldig pent, lett å lese og skrive, og i tråd med preprocessor målet om å lage kode ren og minimal.
Husk også at mens jeg i eksemplet ovenfor har utelatt all syntaks "tegnsetting" som kan utelukkes, er det helt valgfritt hvor mye av det du vil legge ut i utviklingen din.
For eksempel har jeg ringt border_and_bg mixin sømløst, skriv det på det samme som jeg ville en vanlig CSS eiendom, uten parentes rundt parametrene eller kommaene mellom dem. Men hvis du foretrekker å kunne inkludere parenteser og kommaer når du ringer til mixins, er det helt opp til deg.
En av de beste tingene med å jobbe med Sass og LESS er henholdsvis Compass / Bourbon og LESShat mixinbibliotekene. Men du vil ikke gå glipp av et fantastisk bibliotek med mixins med Stylus, takket være Nib.
Pakken "StylusCompiler" Jeg ga deg automatisk installasjoner (takket være Grunt-Contrib-stylus) og inkluderer Nib i prosjektet ditt, slik at du ikke trenger å ta ytterligere skritt for å kunne bruke det.
Nib gir mixins for alle CSS3-effektene du forventer, som hver kan kalles sømløst som om du bruker en vanlig CSS-egenskap. Den inneholder også et imponerende utvalg av mixins for andre funksjoner som posisjonering, tilbakestilling / normalisering, clearfixing, responsive bilder og mer.
Sjekk ut dokumentene for en fullstendig nedtur her: http://visionmedia.github.io/nib/
Merk: Et annet mixin bibliotek alternativ for Stylus er Axis.
Stylus har mange andre flotte funksjoner, gjort på sin egen unike og super rene måte, og du bør virkelig sjekke ut mye her: http://learnboost.github.io/stylus/
Det er imidlertid et par spesielt at jeg virkelig elsker.
Hvileparametre lar deg passere et ubestemt antall verdier til en mixin uten å plutselig kartlegge dem i opprettelsen av mixin. Du kan trekke ut en bestemt verdi, og deretter passere "resten" ved å bruke args ... og args. For eksempel:
Noen ganger kan du gjenta en viss verdi et par ganger, men bare innenfor en enkelt stil, så å måtte erklære en variabel for å holde det kan være overkill.
Med egenskapsoppslagfunksjonen kan du slå opp verdien av enhver eiendom du har erklært i samme stil eller en overordnet stil. For eksempel:
Alt du trenger å gjøre er å bruke @ symbol før eiendommen du vil slå opp. Stylus vil se først ut i samme stil, og hvis den ikke finner noen kamp, vil den kontrollere foreldrene og fortsette å boble til den enten får en kamp eller når dokumentrotten og returnerer "null".
Forhåpentligvis nå føler du deg klar til å takle oppsett av Stylus hvis du har vært forsiktig med kommandolinjen før, og du er nysgjerrig nok til å undersøke om du elsker Sass-makt, men foretrekker å jobbe med Node.js over Ruby. Og selv om ingen av disse to er spesielt relevante for deg, håper jeg at du er fascinert nok av noen av de unike tilnærmingene tatt av Stylus for å spinne opp og spille med det.
For å pakke inn, vil jeg gi deg en liste over interessante Stylus-relaterte godbiter for at du skal ta en titt gjennom, noen som er nevnt ovenfor, samt noen statister.
Nyt!
Accentsconagua