Hvad er Stylus CSS, og hvordan bruger du det?

Når det kommer til webudvikling, er den mest almindelige måde at style en applikation på at bruge CSS. CSS kan dog være besværligt at arbejde med, fordi det er notorisk svært at fejlfinde.

Lær, hvordan du bruger Stylus CSS, og du har en anden mulighed, med en af ​​de mest populære CSS-forprocessorer, der er tilgængelige.

Hvad er en CSS Preprocessor?

CSS-forprocessorer er hjælpeprogrammer, der gør det nemmere at skrive CSS. De kompilerer ofte kode fra deres egen brugerdefinerede syntaks til .css format, som browsere kan forstå.

CSS-forprocessorer som Sass, for eksempel, tilbyder specielle funktioner som loops, mixins, indlejrede vælgere og if/else-sætninger. Disse funktioner gør det nemmere at vedligeholde din CSS-kode, især i store teams.

For at bruge en CSS-processor skal du installere compileren i dit lokale miljø og/eller produktionsserver. Nogle frontend build-værktøjer, som Vite, lader dig inkludere CSS-forprocessorer som LessCSS i dit projekt.

Sådan fungerer Stylus CSS

For at installere Stylus i dit lokale miljø skal du bruge Node.js og enten Node Package Manager (NPM) eller Garn installeret på din maskine. Kør følgende terminalkommando:

npm installere stylus

Eller:

garn tilføje stylus

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

stylus .

Dette bør kompilere alle .styl filer og output .css filer i den aktuelle mappe. Stylus-kompileren gør det også muligt at kompilere .css filer ind .styl med --css flag. At konvertere en .css fil til .styl format, brug denne kommando:

stylus --css style.css style.styl

Syntaks og forældrevælgere i Stylus CSS

I traditionel CSS definerer du en stilblok med seler; manglende medtagelse af disse karakterer vil føre til brudte stilarter. I Stylus CSS er det valgfrit at bruge seler.

Stylus understøtter en Python-lignende syntaks, hvilket betyder, at du kan definere blokke ved hjælp af indrykning i stedet, sådan:

.beholder
margen: 10px

Kodeblokken ovenfor kompilerer til følgende CSS:

.beholder {
margen: 10px;
}

Ligesom i CSS-forprocessorer som Less, kan du referere til en forældrevælger med & Karakter:

knap
farve: hvid;
 &:hover
farve: gul;

Som kompilerer til:

knap {
farve: #fff;
}
knap:hover {
farve: #ff0;
}

Sådan bruges variabler i Stylus CSS

I CSS-forprocessorer som Less CSS definerer du variabler med @ Karakter, mens traditionel CSS bruger "--" til at definere en variabel.

I Stylus er tingene lidt anderledes: du behøver ikke et specielt symbol for at definere en variabel. I stedet skal du bare definere variablen ved hjælp af et lighedstegn (=) for at binde det til en værdi:

bg-farve = sort

Du kan nu bruge variablen i .styl fil som denne:

div
baggrundsfarve: bg-farve

Kodeblokkene ovenfor kompileres til følgende CSS:

div {
baggrundsfarve: #000;
}

Du kan definere en nulvariabel med parenteser. For eksempel:

tom-variabel = ()

Du kan referere til andre egenskabsværdier ved hjælp af @ symbol. Hvis du f.eks. vil indstille en divs højde til halvdelen af ​​dens bredde, kan du gøre følgende:

element-bredde = 563px
div
bredde: element-bredde
højde: (element-bredde / 2)

Det ville fungere, men du kan også helt undgå at oprette variablen og henvise til bredde ejendomsværdi i stedet:

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

I denne kodeblok er @ symbol giver dig mulighed for at henvise til den faktiske bredde ejendom på div. Uanset hvilken tilgang du vælger, når du kompilerer .styl fil, bør du få følgende CSS:

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

Funktioner i Stylus CSS

Du kan oprette funktioner, der returnerer værdier i Stylus CSS. Lad os sige, at du vil indstille tekstjustering ejendom af en div til at "centrere", hvis den bredde er større end 400px, eller "venstre", hvis bredde er mindre end 400px. Du kan oprette en funktion, der håndterer denne logik.

centrere(n)
hvis (n > 400)
 'centrum'
andethvis (n < 200)
 'venstre'
div {
bredde: 563px
tekstjustering: centrere(@bredde)
højde: (@bredde / 2)
}

Denne kodeblok kalder centrere funktion, passerer bredde ejendomsværdi ved at henvise til den med @ symbol. Det centrere funktion kontrollerer, om dens parameter, n, er større end 400 og returnerer "center", hvis det er det. Hvis n er mindre end 200, returnerer funktionen "venstre".

Når compileren kører, skal den producere følgende output:

div {
bredde: 563px;
tekstjustering: 'centrum';
højde: 281.5px;
}

I de fleste programmeringssprog tildeler funktioner parametre baseret på den rækkefølge, du angiver dem i. Dette kan føre til fejl som et resultat af at sende parametre i den forkerte rækkefølge, hvilket er mere sandsynligt, jo flere parametre du skal passere.

Stylus giver en løsning: navngivne parametre. Brug dem i stedet for ordnede parametre, når du kalder en funktion, som dette:

trække fra(b:30px, -en:10px)/*-20px*/

Hvornår skal man bruge en CSS Preprocessor

CSS-forprocessorer er meget kraftfulde hjælpeprogrammer, som du kan bruge til at strømline din arbejdsgang. At vælge det rigtige værktøj til dit projekt kan hjælpe med at forbedre din produktivitet. Hvis dit projekt kun har brug for en lille mængde CSS, kan det være overdrevent at bruge en CSS-forbehandler.

Hvis du bygger et stort projekt, måske som en del af et team, der er afhængig af en enorm mængde CSS, så overvej at bruge en præprocessor. De tilbyder funktioner som funktioner, loops og mixins, der gør det nemmere at style komplekse projekter.