Du er kanskje mer kjent med andre CSS-forprosessorer, men ikke overse denne utfordreren.

Når det kommer til webutvikling, er den vanligste måten å style en applikasjon på å bruke CSS. Imidlertid kan CSS være tungvint å jobbe med fordi det er notorisk vanskelig å feilsøke.

Lær hvordan du bruker Stylus CSS, og du vil ha et annet alternativ, med en av de mest populære CSS-forprosessorene som er tilgjengelige.

Hva er en CSS-forbehandler?

CSS-forprosessorer er verktøy som gjør det enklere å skrive CSS. De kompilerer ofte kode fra sin egen tilpassede syntaks til .css format som nettlesere kan forstå.

CSS-forprosessorer som Sass, for eksempel, tilbyr spesielle funksjoner som loops, mixins, nestede velgere og if/else-setninger. Disse funksjonene gjør det enklere å vedlikeholde CSS-koden din, spesielt i store team.

For å bruke en CSS-prosessor, må du installere kompilatoren i ditt lokale miljø og/eller produksjonsserver. Noen frontend byggeverktøy, som Vite, lar deg inkludere CSS-forprosessorer som LessCSS i prosjektet ditt.

Hvordan Stylus CSS fungerer

For å installere Stylus i ditt lokale miljø trenger du Node.js og enten Node Package Manager (NPM) eller Garn installert på maskinen din. Kjør følgende terminalkommando:

npm installer pekepennen

Eller:

garn legge til pekepenn

Hver Stylus CSS-fil ender på en .styl Utvidelse. Når du har skrevet Stylus CSS-koden din, kan du kompilere den med denne kommandoen:

pekepenn .

Dette bør kompilere alle .styl filer og utdata .css filer i gjeldende katalog. Stylus-kompilatoren gjør det også mulig å kompilere .css filer inn .styl med --css flagg. For å konvertere en .css fil til .styl format, bruk denne kommandoen:

stylus --css style.css style.styl

Syntaks og foreldrevelgere i Stylus CSS

I tradisjonell CSS definerer du en stilblokk med klammeparenteser; unnlatelse av å inkludere disse karakterene vil føre til ødelagte stiler. I Stylus CSS er bruk av tannregulering valgfritt.

Stylus støtter en Python-lignende syntaks, noe som betyr at du kan definere blokker ved å bruke innrykk i stedet, slik:

.container
margin: 10px

Kodeblokken ovenfor kompilerer til følgende CSS:

.container {
margin: 10px;
}

Akkurat som i CSS-forprosessorer som Less, kan du referere til en foreldrevelger med & karakter:

knapp
farge: hvit;
 &:sveve
farge: gul;

Som kompilerer til:

knapp {
farge: #fff;
}
knapp:sveve {
farge: #ff0;
}

Slik bruker du variabler i Stylus CSS

I CSS-forprosessorer som Less CSS, definerer du variabler med @ karakter, mens tradisjonell CSS bruker "--" for å definere en variabel.

I Stylus er ting litt annerledes: du trenger ikke et spesielt symbol for å definere en variabel. I stedet definerer du bare variabelen ved å bruke et likhetstegn (=) for å binde den til en verdi:

bg-farge = svart

Du kan nå bruke variabelen i .styl fil slik:

div
bakgrunnsfarge: bg-farge

Kodeblokkene ovenfor kompileres til følgende CSS:

div {
bakgrunnsfarge: #000;
}

Du kan definere en nullvariabel med parenteser. For eksempel:

tom-variabel = ()

Du kan referere til andre egenskapsverdier ved å bruke @ symbol. Hvis du for eksempel vil angi en divs høyde til halvparten av bredden, kan du gjøre følgende:

elementbredde = 563px
div
bredde: elementbredde
høyde: (elementbredde / 2)

Det ville fungere, men du kan også unngå å lage variabelen helt og referere til bredde eiendomsverdi i stedet:

div
bredde: 563px
høyde: (@bredde / 2)

I denne kodeblokken er @ symbolet lar deg referere til den faktiske bredde eiendom på div. Uansett hvilken tilnærming du velger, når du kompilerer .styl fil, bør du få følgende CSS:

div {
bredde: 563px;
høyde: 281.5px;
}

Funksjoner i Stylus CSS

Du kan lage funksjoner som returnerer verdier i Stylus CSS. La oss si at du vil angi tekstjustering egenskapen til en div å "sentrere" hvis bredde er større enn 400px, eller "venstre" hvis bredde er mindre enn 400 piksler. Du kan lage en funksjon som håndterer denne logikken.

midtstille(n)
hvis (n > 400)
 'senter'
ellershvis (n < 200)
 'venstre'
div {
bredde: 563px
tekstjustering: midtstille(@bredde)
høyde: (@bredde / 2)
}

Denne kodeblokken kaller midtstille funksjon, passerer bredde eiendomsverdi ved å referere til den med @ symbol. De midtstille funksjonen sjekker om parameteren, n, er større enn 400, og returnerer "senter" hvis det er det. Hvis n er mindre enn 200, returnerer funksjonen "venstre".

Når kompilatoren kjører, skal den produsere følgende utgang:

div {
bredde: 563px;
tekstjustering: 'senter';
høyde: 281.5px;
}

I de fleste programmeringsspråk tildeler funksjoner parametere basert på rekkefølgen du gir dem. Dette kan føre til feil som følge av å sende parametere i feil rekkefølge, noe som er mer sannsynlig jo flere parametere du må passere.

Stylus gir en løsning: navngitte parametere. Bruk dem i stedet for ordnede parametere når du kaller en funksjon, som dette:

trekke fra(b:30px, en:10px)/*-20px*/

Når du skal bruke en CSS-forprosessor

CSS-forprosessorer er veldig kraftige verktøy som du kan bruke til å strømlinjeforme arbeidsflyten din. Å velge riktig verktøy for prosjektet ditt kan bidra til å forbedre produktiviteten. Hvis prosjektet ditt trenger bare en liten mengde CSS, kan det være overkill å bruke en CSS-forprosessor.

Hvis du bygger et stort prosjekt, kanskje som en del av et team, som er avhengig av en enorm mengde CSS, bør du vurdere å bruke en forprosessor. De tilbyr funksjoner som funksjoner, loops og mixins som gjør det enklere å style komplekse prosjekter.