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.
Innholdsfortegnelse
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-formatet 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 Yarn installert på maskinen din. Kjør følgende terminalkommando:
npm install stylus
Eller:
yarn add stylus
Hver Stylus CSS-fil ender med en .styl-utvidelse. Når du har skrevet Stylus CSS-koden din, kan du kompilere den med denne kommandoen:
stylus .
Dette bør kompilere alle .styl-filene og sende ut .css-filer i gjeldende katalog. Stylus-kompilatoren gjør det også mulig å kompilere .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 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 &-tegnet:
button
color: white;
&:hover
color: yellow;
Som kompilerer til:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Slik bruker du 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 ting litt annerledes: du trenger ikke et spesielt symbol for å definere en variabel. I stedet definerer du variabelen ved å bruke et likhetstegn (=) for å binde den til en verdi:
bg-color = black
Du kan nå bruke variabelen i .styl-filen slik:
div
background-color: bg-color
Kodeblokkene ovenfor kompileres 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 vil angi en divs høyde til halvparten av bredden, kan du gjøre følgende:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Det ville fungere, men du kan også unngå å opprette variabelen helt og referere til breddeegenskapsverdien i stedet:
div
width: 563px
height: (@width / 2)
I denne kodeblokken lar @-symbolet deg referere til den faktiske breddeegenskapen på div. Uansett hvilken tilnærming du velger, når du kompilerer .styl-filen, bør du 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 tekstjusteringsegenskapen til en div til «senter» hvis bredden er større enn 400px, eller «venstre» hvis bredden er mindre enn 400px. Du kan 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 width-egenskapsverdien ved å referere til den med @-symbolet. alignCenter-funksjonen sjekker om parameteren, n, er større enn 400, og returnerer «senter» hvis den er det. Hvis n er mindre enn 200, returnerer funksjonen «venstre».
Når kompilatoren kjører, skal den produsere følgende utgang:
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 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:
subtract(b:30px, a:10px)
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.