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.
Innehållsförteckning
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-formatet 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.
Hur Stylus CSS fungerar
För att installera Stylus i din lokala miljö behöver du Node.js och antingen Node Package Manager (NPM) eller Yarn installerat på din maskin. Kör följande terminalkommando:
npm install stylus
Eller:
yarn add stylus
Varje Stylus CSS-fil slutar med filtillägget .styl. När du har skrivit din Stylus CSS-kod kan du kompilera den med det här kommandot:
stylus .
Detta bör kompilera alla .styl-filer och mata ut .css-filer i den aktuella katalogen. Stylus-kompilatorn gör det också möjligt att kompilera .css-filer till .styl med flaggan –css. För att konvertera en .css-fil till .styl-formatet, använd det här kommandot:
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:
.container
margin: 10px
Kodblocket ovan kompilerar till följande CSS:
.container {
margin: 10px;
}
Precis som i CSS-förprocessorer som Less, kan du referera till en föräldraväljare med tecknet &:
button
color: white;
&:hover
color: yellow;
Som kompilerar till:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Hur man använder variabler i Stylus CSS
I CSS-förprocessorer som Less CSS definierar du variabler med tecknet @, 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 den till ett värde:
bg-color = black
Du kan nu använda variabeln i .styl-filen så här:
div
background-color: bg-color
Kodblocken ovan kompileras till följande CSS:
div {
background-color: #000;
}
Du kan definiera en nollvariabel med parenteser. Till exempel:
empty-variable = ()
Du kan referera till andra egenskapsvärden med @-symbolen. Om du till exempel vill ställa in en divs höjd till hälften av dess bredd kan du göra följande:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Det skulle fungera, men du kan också undvika att skapa variabeln helt och hållet och referera till width-egenskapsvärdet istället:
div
width: 563px
height: (@width / 2)
I detta kodblock låter @-symbolen dig referera till den faktiska width-egenskapen på div. Oavsett vilket tillvägagångssätt du väljer bör du få följande CSS när du kompilerar .styl-filen:
div {
width: 563px;
height: 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 egenskapen text-align för en div till ”center” om bredden är större än 400px, eller ”left” om bredden är mindre än 400px. Du kan skapa en funktion som hanterar denna logik.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Detta kodblock anropar alignCenter-funktionen och skickar width-egenskapsvärdet genom att referera till det med @-symbolen. Funktionen alignCenter kontrollerar om dess parameter, n, är större än 400, och returnerar ”center” om den ä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 {
width: 563px;
text-align: 'center';
height: 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:
subtract(b:30px, a:10px)
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.