Att designa utseendet på webbapplikationer görs oftast med CSS. Dock kan CSS vara besvärligt, särskilt när det gäller att hitta och åtgärda fel.
Ett alternativ är att lära sig Stylus CSS, en av de mest använda CSS-förprocessorerna som finns tillgängliga, vilket kan underlätta designprocessen.
Vad är en CSS-förprocessor?
CSS-förprocessorer är verktyg som förenklar CSS-kodning. De omvandlar kod från sin egen specifika syntax till det .css-format som webbläsare kan tolka.
Till exempel, CSS-förprocessorer som Sass erbjuder avancerade funktioner som loopar, mixins, kapslade väljare och villkorssatser (if/else). Dessa funktioner underlättar underhållet av CSS-koden, särskilt i större projekt med flera utvecklare.
För att använda en CSS-förprocessor krävs installation av kompilatorn i den lokala utvecklingsmiljön och/eller på produktionsservern. Vissa frontend-verktyg, som Vite, ger möjlighet att inkludera CSS-förprocessorer som LessCSS direkt i projektet.
Hur Stylus CSS fungerar
För att installera Stylus lokalt behöver man Node.js och antingen Node Package Manager (NPM) eller Yarn. Installationen görs med följande terminalkommando:
npm install stylus
Eller:
yarn add stylus
Varje Stylus CSS-fil har filändelsen .styl. Efter att Stylus-koden är skriven kompileras den med kommandot:
stylus .
Detta konverterar alla .styl-filer och skapar .css-filer i samma mapp. Stylus kompilator kan även konvertera .css-filer till .styl genom att använda flaggan –css. För att göra detta, använd följande kommando:
stylus --css style.css style.styl
Syntax och föräldraväljare i Stylus CSS
I vanlig CSS används klammerparenteser för att definiera stilblock, och uteblivna parenteser leder till fel i stilen. I Stylus CSS är klammerparenteser valfria.
Stylus använder en syntax som liknar Python, vilket innebär att block kan definieras med hjälp av indrag i stället:
.container
margin: 10px
Ovanstående kod resulterar i följande CSS:
.container {
margin: 10px;
}
Precis som i CSS-förprocessorer som Less, kan en föräldraväljare refereras till med tecknet &:
button
color: white;
&:hover
color: yellow;
Vilket konverteras till:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Hur man använder variabler i Stylus CSS
I CSS-förprocessorer som Less CSS skapas variabler med tecknet @, medan traditionell CSS använder ”–” för att definiera en variabel.
Stylus hanterar detta annorlunda: ingen specifik symbol krävs för att skapa en variabel. Variabeln definieras helt enkelt med ett likhetstecken (=) för att binda den till ett värde:
bg-color = black
Nu kan variabeln användas i .styl-filen så här:
div
background-color: bg-color
Dessa kodblock resulterar i följande CSS:
div {
background-color: #000;
}
En tom variabel kan skapas med parenteser, till exempel:
empty-variable = ()
Det är även möjligt att referera till andra egenskapsvärden med @-symbolen. Om man exempelvis vill att höjden på en div ska vara hälften av dess bredd kan man göra så här:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Detta fungerar, men variabeln kan uteslutas genom att direkt referera till width-egenskapens värde:
div
width: 563px
height: (@width / 2)
I detta kodblock tillåter @-symbolen att referera till width-egenskapen på div. Oavsett vilket tillvägagångssätt som väljs, resulterar kompileringen av .styl-filen i följande CSS:
div {
width: 563px;
height: 281.5px;
}
Funktioner i Stylus CSS
Det är möjligt att skapa funktioner som returnerar värden i Stylus CSS. Tänk dig att man vill ställa in text-align på en div till ”center” om bredden är större än 400px, annars ska texten vara ”left”. En funktion kan skapas för att hantera detta.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Detta kodblock anropar funktionen alignCenter och skickar med width-egenskapens värde genom att referera till den med @-symbolen. Funktionen alignCenter kontrollerar om parametern n är större än 400, och returnerar ”center” om så är fallet. Om n är mindre än 200 returneras ”left”.
När kompilatorn körs produceras följande utdata:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
I de flesta programmeringsspråk tilldelas funktionsparametrar baserat på ordningen de anges i. Detta kan leda till misstag om parametrarna skickas i fel ordning, vilket blir mer troligt ju fler parametrar som används.
Stylus erbjuder en lösning: namngivna parametrar. Använd dessa istället för ordnade parametrar när en funktion anropas, så här:
subtract(b:30px, a:10px)
När ska man använda en CSS-förprocessor
CSS-förprocessorer är kraftfulla verktyg som kan effektivisera arbetsflödet. Att välja rätt verktyg för projektet kan öka produktiviteten. Om ett projekt endast kräver en liten mängd CSS, kan det vara onödigt att använda en CSS-förprocessor.
Om ett stort projekt utvecklas, kanske i ett team, som beror på mycket CSS, är det bra att överväga att använda en förprocessor. Dessa erbjuder funktioner som funktioner, loopar och mixins som gör det enklare att hantera komplexa projekt.