Utforsk Stylus CSS: Et alternativ til tradisjonell CSS
Innen webutvikling er CSS det mest brukte verktøyet for å style applikasjoner. Likevel kan CSS være utfordrende å arbeide med, da det er kjent for å være vanskelig å feilsøke.
Ved å lære å bruke Stylus CSS, vil du oppdage en ny mulighet med en av de mest anerkjente CSS-forprosessorene på markedet.
Hva er en CSS-forprosessor?
CSS-forprosessorer er verktøy som forenkler skriving av CSS. De kompilerer kode fra deres egne tilpassede syntakser til det velkjente .css-formatet som nettlesere forstår.
CSS-forprosessorer, som for eksempel Sass, tilbyr avanserte funksjoner som løkker, mixins, nestede selektorer og if/else-setninger. Disse funksjonene gjør det lettere å vedlikeholde CSS-koden din, spesielt i større teamprosjekter.
For å dra nytte av en CSS-forprosessor, må du installere kompilatoren i ditt lokale utviklingsmiljø eller på produksjonsserveren. Visse frontend-byggeverktøy, som Vite, lar deg integrere CSS-forprosessorer som LessCSS i prosjektet ditt.
Hvordan Stylus CSS fungerer
For å installere Stylus lokalt trenger du Node.js og enten Node Package Manager (NPM) eller Yarn installert. Kjør følgende kommando i terminalen:
npm install stylus
Eller:
yarn add stylus
Hver Stylus CSS-fil har filendelsen .styl. Etter at du har skrevet Stylus CSS-koden din, kan du kompilere den ved å bruke denne kommandoen:
stylus .
Dette vil kompilere alle .styl-filene og generere .css-filer i gjeldende mappe. Stylus-kompilatoren kan også konvertere .css-filer til .styl med –css-flagget. For å konvertere en .css-fil til .styl-formatet, bruk denne kommandoen:
stylus --css style.css style.styl
Syntaks og foreldrevelgere i Stylus CSS
I tradisjonell CSS definerer du en stilblokk ved hjelp av krøllparenteser; unnlater du å inkludere disse, kan det føre til feil i stilene. I Stylus CSS er bruk av krøllparenteser valgfritt.
Stylus bruker en Python-lignende syntaks, noe som betyr at du kan definere blokker ved hjelp av innrykk, slik som dette:
.container
margin: 10px
Kodeblokken over vil bli kompilert til følgende CSS:
.container {
margin: 10px;
}
På samme måte som i CSS-forprosessorer som Less, kan du referere til en foreldrevelger med &-tegnet:
button
color: white;
&:hover
color: yellow;
Som kompilert blir:
button {
color: #fff;
}
button:hover {
color: #ff0;
}
Hvordan bruke variabler i Stylus CSS
I CSS-forprosessorer som Less CSS, definerer du variabler med @-tegnet, mens tradisjonell CSS bruker «–» for å definere en variabel.
I Stylus er dette litt annerledes: du trenger ikke et spesielt symbol for å definere en variabel. Istedenfor definerer du variabelen ved å bruke et likhetstegn (=) for å knytte den til en verdi:
bg-color = black
Du kan nå bruke variabelen i .styl-filen på denne måten:
div
background-color: bg-color
Kodeblokken over vil bli kompilert til følgende CSS:
div {
background-color: #000;
}
Du kan definere en nullvariabel med parenteser. For eksempel:
empty-variable = ()
Du kan referere til andre egenskapsverdier ved å bruke @-symbolet. Hvis du for eksempel ønsker å sette høyden på en div til halvparten av bredden, kan du gjøre dette:
element-width = 563px
div
width: element-width
height : (element-width / 2)
Det ville fungere, men du kan også unngå å opprette variabelen helt og referere til breddeegenskapens verdi istedenfor:
div
width: 563px
height: (@width / 2)
I denne kodeblokken lar @-symbolet deg referere til den faktiske breddeegenskapen på diven. Uansett hvilken tilnærming du velger, vil du, når du kompilerer .styl-filen, få følgende CSS:
div {
width: 563px;
height: 281.5px;
}
Funksjoner i Stylus CSS
Du kan lage funksjoner som returnerer verdier i Stylus CSS. La oss si at du vil sette teksten til å være sentrert i en div hvis bredden er større enn 400px, eller venstrejustert hvis bredden er mindre enn 400px. Da kan du lage en funksjon som håndterer denne logikken.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'
div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Denne kodeblokken kaller alignCenter-funksjonen og sender breddeegenskapens verdi ved å referere til den med @-symbolet. alignCenter-funksjonen sjekker om parameteren, n, er større enn 400 og returnerer «center» hvis det stemmer. Hvis n er mindre enn 200, returnerer funksjonen «left».
Når kompilatoren kjører, skal den generere følgende utdata:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
I de fleste programmeringsspråk tildeler funksjoner parametere basert på rekkefølgen du gir dem. Dette kan føre til feil som et resultat av å sende parametere i feil rekkefølge, noe som er mer sannsynlig jo flere parametere du må sende inn.
Stylus tilbyr en løsning: navngitte parametere. Bruk dem i stedet for ordnede parametere når du kaller en funksjon, slik som dette:
subtract(b:30px, a:10px)
Når du bør vurdere å bruke en CSS-forprosessor
CSS-forprosessorer er svært kraftige verktøy som du kan bruke for å effektivisere arbeidsflyten din. Å velge det riktige verktøyet for prosjektet ditt kan bidra til å forbedre produktiviteten din. Hvis prosjektet ditt kun krever en liten mengde CSS, kan det være unødvendig å bruke en CSS-forprosessor.
Hvis du derimot bygger et større prosjekt, kanskje som en del av et team, som er avhengig av en stor mengde CSS, bør du vurdere å bruke en forprosessor. De tilbyr funksjoner som funksjoner, løkker og mixins, som gjør det lettere å style komplekse prosjekter.