Du kanske är mer bekant med andra CSS-förprocessorer, men glöm inte bort den här utmanaren.

När det kommer till webbutveckling är det vanligaste sättet att styla en applikation att använda CSS. CSS kan dock vara krångligt att arbeta med eftersom det är notoriskt svårt att felsöka.

Lär dig hur du använder Stylus CSS, så får du ett annat alternativ, med en av de mest populära CSS-förprocessorerna som finns tillgängliga.

Vad är en CSS-förprocessor?

CSS-förprocessorer är verktyg som gör det lättare att skriva CSS. De kompilerar ofta kod från sin egen anpassade syntax till .css format som webbläsare kan förstå.

CSS-förprocessorer som Sass, till exempel, erbjuder specialfunktioner som loopar, mixins, kapslade väljare och if/else-satser. Dessa funktioner gör det lättare att underhålla din CSS-kod, särskilt i stora team.

För att använda en CSS-processor måste du installera kompilatorn i din lokala miljö och/eller produktionsserver. Vissa frontend-byggverktyg, som Vite, låter dig inkludera CSS-förprocessorer som LessCSS i ditt projekt.

instagram viewer

Hur Stylus CSS fungerar

För att installera Stylus i din lokala miljö behöver du Node.js och antingen Nod Package Manager (NPM) eller Garn installerat på din maskin. Kör följande terminalkommando:

npm installera pennan

Eller:

garn lägg till stylus

Varje Stylus CSS-fil slutar på en .styl förlängning. När du har skrivit din Stylus CSS-kod kan du kompilera den med det här kommandot:

penna .

Detta bör kompilera alla .styl filer och utdata .css filer i den aktuella katalogen. Stylus-kompilatorn gör det också möjligt att kompilera .css filer till .styl med --css flagga. Att konvertera en .css fil till .styl format, använd detta kommando:

stylus --css style.css style.styl

Syntax och föräldraväljare i Stylus CSS

I traditionell CSS definierar du ett stilblock med hängslen; underlåtenhet att inkludera dessa karaktärer kommer att leda till trasiga stilar. I Stylus CSS är det valfritt att använda hängslen.

Stylus stöder en Python-liknande syntax, vilket innebär att du kan definiera block med indrag istället, så här:

.behållare
marginal: 10px

Kodblocket ovan kompilerar till följande CSS:

.behållare {
marginal: 10px;
}

Precis som i CSS-förprocessorer som Less kan du referera till en föräldraväljare med & karaktär:

knapp
Färg: vit;
 &:sväva
Färg: gul;

Som kompilerar till:

knapp {
Färg: #fff;
}
knapp:sväva {
Färg: #ff0;
}

Hur man använder variabler i Stylus CSS

I CSS-förprocessorer som Less CSS definierar du variabler med @ karaktär, medan traditionell CSS använder "--" för att definiera en variabel.

I Stylus är saker och ting lite annorlunda: du behöver ingen speciell symbol för att definiera en variabel. Istället definierar du bara variabeln med ett likhetstecken (=) för att binda det till ett värde:

bg-färg = svart

Du kan nu använda variabeln i .styl fil så här:

div
bakgrundsfärg: bg-färg

Kodblocken ovan kompileras till följande CSS:

div {
bakgrundsfärg: #000;
}

Du kan definiera en nollvariabel med parenteser. Till exempel:

tom-variabel = ()

Du kan referera till andra egenskapsvärden med hjälp av @ symbol. Om du till exempel vill ställa in en divs höjd till hälften av dess bredd kan du göra följande:

elementets bredd = 563px
div
bredd: elementets bredd
höjd: (elementets bredd / 2)

Det skulle fungera, men du kan också undvika att skapa variabeln helt och hållet och referera till bredd fastighetsvärde istället:

div
bredd: 563px
höjd: (@bredd / 2)

I detta kodblock är @ symbolen låter dig referera till den faktiska bredd egendom på div. Oavsett vilket tillvägagångssätt du väljer, när du kompilerar .styl fil, bör du få följande CSS:

div {
bredd: 563px;
höjd: 281.5px;
}

Funktioner i Stylus CSS

Du kan skapa funktioner som returnerar värden i Stylus CSS. Låt oss säga att du vill ställa in textjustera egenskap hos en div till "centrera" om den bredd är större än 400px, eller "vänster" om bredd är mindre än 400px. Du kan skapa en funktion som hanterar denna logik.

Centrera i linje med(n)
om (n > 400)
 'Centrum'
annanom (n < 200)
 'vänster'
div {
bredd: 563px
textjustera: Centrera i linje med(@bredd)
höjd: (@bredd / 2)
}

Detta kodblock kallar Centrera i linje med funktion, passerar bredd fastighetsvärde genom att hänvisa till det med @ symbol. De Centrera i linje med funktion kontrollerar om dess parameter, n, är större än 400 och returnerar "center" om det är det. Om n är mindre än 200, returnerar funktionen "vänster".

När kompilatorn körs bör den producera följande utdata:

div {
bredd: 563px;
textjustera: 'Centrum';
höjd: 281.5px;
}

I de flesta programmeringsspråk tilldelar funktioner parametrar baserat på den ordning du tillhandahåller dem. Detta kan leda till misstag som ett resultat av att parametrar skickas i fel ordning, vilket är mer sannolikt ju fler parametrar du måste passera.

Stylus ger en lösning: namngivna parametrar. Använd dem istället för ordnade parametrar när du anropar en funktion, så här:

subtrahera(b:30px, a:10px)/*-20px*/

När ska man använda en CSS-förprocessor

CSS-förprocessorer är mycket kraftfulla verktyg som du kan använda för att effektivisera ditt arbetsflöde. Att välja rätt verktyg för ditt projekt kan bidra till att förbättra din produktivitet. Om ditt projekt bara behöver en liten mängd CSS, kan det vara överdrivet att använda en CSS-förprocessor.

Om du bygger ett stort projekt, kanske som en del av ett team, som är beroende av en enorm mängd CSS, överväg att använda en förprocessor. De erbjuder funktioner som funktioner, loopar och mixins som gör det lättare att styla komplexa projekt.