Hva er Stylus CSS og hvordan bruker du det?

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-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 = 563px
div
    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.