U bent misschien meer bekend met andere CSS-preprocessors, maar vergeet deze mededinger niet.

Als het gaat om webontwikkeling, is CSS de meest gebruikelijke manier om een ​​applicatie te stylen. CSS kan echter omslachtig zijn om mee te werken, omdat het notoir moeilijk te debuggen is.

Leer hoe u Stylus CSS gebruikt en u hebt nog een andere optie, met een van de meest populaire beschikbare CSS-preprocessors.

Wat is een CSS-preprocessor?

CSS-preprocessors zijn hulpprogramma's die het schrijven van CSS vergemakkelijken. Ze compileren vaak code van hun eigen aangepaste syntaxis naar het .css formaat dat browsers kunnen begrijpen.

CSS-preprocessors zoals Sass bieden bijvoorbeeld speciale functies zoals loops, mixins, geneste selectors en if/else-statements. Deze functies maken het gemakkelijker om uw CSS-code te onderhouden, vooral in grote teams.

Om een ​​CSS-processor te gebruiken, moet u de compiler in uw lokale omgeving en/of productieserver installeren. Met sommige tools voor het bouwen van frontends, zoals Vite, kunt u opnemen CSS-preprocessors zoals LessCSS bij uw project.

instagram viewer

Hoe Stylus CSS werkt

Om Stylus in uw lokale omgeving te installeren, hebt u Node.js en een van beide nodig Knooppuntpakketbeheerder (NPM) of Garen geïnstalleerd op uw machine. Voer de volgende terminalopdracht uit:

npm installatie-stylus

Of:

garen stylus toevoegen

Elk Stylus CSS-bestand eindigt op een .stijl verlenging. Nadat u uw Stylus CSS-code heeft geschreven, kunt u deze compileren met deze opdracht:

stylus.

Dit zou alle moeten compileren .stijl bestanden en uitvoer .css bestanden in de huidige map. De Stylus-compiler maakt het ook mogelijk om te compileren .css bestanden in .stijl met de --css vlag. Omzetten van een .css bestand naar de .stijl formaat, gebruik deze opdracht:

stylus --css stijl.css stijl.styl

Syntaxis en bovenliggende kiezers in Stylus CSS

In traditionele CSS definieert u een stijlblok met accolades; het niet opnemen van deze karakters zal leiden tot gebroken stijlen. In Stylus CSS is het gebruik van accolades optioneel.

Stylus ondersteunt een Python-achtige syntaxis, wat betekent dat je blokken kunt definiëren met behulp van inspringingen, zoals deze:

.container
marge: 10px

Het codeblok hierboven compileert naar de volgende CSS:

.container {
marge: 10px;
}

Net als in CSS-preprocessors zoals Less, kunt u verwijzen naar een bovenliggende selector met de & karakter:

knop
kleur: wit;
 &:zweven
kleur: geel;

Welke compileert naar:

knop {
kleur: #fff;
}
knop:zweven {
kleur: #ff0;
}

Variabelen gebruiken in Stylus CSS

In CSS-preprocessors zoals Less CSS definieert u variabelen met de @ karakter, terwijl traditionele CSS "--" gebruikt om een ​​variabele te definiëren.

In Stylus is het een beetje anders: je hebt geen speciaal symbool nodig om een ​​variabele te definiëren. Definieer in plaats daarvan gewoon de variabele met een gelijkteken (=) om het aan een waarde te binden:

bg-kleur = zwart

U kunt nu de variabele in de .stijl bestand als volgt:

div
Achtergrond kleur: bg-kleur

De bovenstaande codeblokken compileren naar de volgende CSS:

div {
Achtergrond kleur: #000;
}

U kunt een null-variabele tussen haakjes definiëren. Bijvoorbeeld:

lege variabele = ()

U kunt naar andere eigenschapswaarden verwijzen met behulp van de @ symbool. Als u bijvoorbeeld de hoogte van een div wilt instellen op de helft van de breedte, kunt u het volgende doen:

elementbreedte = 563px
div
breedte: elementbreedte
hoogte: (elementbreedte / 2)

Dat zou werken, maar u kunt ook voorkomen dat u de variabele helemaal maakt en verwijst naar de breedte eigendomswaarde in plaats daarvan:

div
breedte: 563px
hoogte: (@breedte / 2)

In dit codeblok wordt de @ symbool kunt u verwijzen naar de werkelijke breedte pand op de div. Ongeacht de aanpak die u kiest, wanneer u het .stijl bestand, zou u de volgende CSS moeten krijgen:

div {
breedte: 563px;
hoogte: 281.5px;
}

Functies in Stylus CSS

U kunt functies maken die waarden retourneren in Stylus CSS. Stel dat u het wilt instellen tekst uitlijnen eigenschap van een div naar "center" als de breedte is groter dan 400px, of "links" als de breedte kleiner is dan 400px. U kunt een functie maken die deze logica afhandelt.

Tekst in het midden uitlijnen(N)
als (N > 400)
 'centrum'
andersals (N < 200)
 'links'
div {
breedte: 563px
tekst uitlijnen: Tekst in het midden uitlijnen(@breedte)
hoogte: (@breedte / 2)
}

Dit codeblok roept de Tekst in het midden uitlijnen functie, het passeren van de breedte eigendomswaarde door ernaar te verwijzen met de @ symbool. De Tekst in het midden uitlijnen functie controleert of zijn parameter, N, is groter dan 400, en retourneert "center" als dat zo is. Als N kleiner is dan 200, retourneert de functie "links".

Wanneer de compiler wordt uitgevoerd, zou deze de volgende uitvoer moeten produceren:

div {
breedte: 563px;
tekst uitlijnen: 'centrum';
hoogte: 281.5px;
}

In de meeste programmeertalen wijzen functies parameters toe op basis van de volgorde waarin u ze opgeeft. Dit kan leiden tot fouten als gevolg van het doorgeven van parameters in de verkeerde volgorde, wat waarschijnlijker is naarmate u meer parameters moet doorgeven.

Stylus biedt een oplossing: benoemde parameters. Gebruik ze in plaats van geordende parameters wanneer u een functie aanroept, zoals deze:

aftrekken(B:30px, A:10 pixels)/*-20px*/

Wanneer gebruik je een CSS-preprocessor?

CSS-preprocessors zijn zeer krachtige hulpprogramma's die u kunt gebruiken om uw workflow te stroomlijnen. Door het juiste gereedschap voor uw project te kiezen, kunt u uw productiviteit verbeteren. Als uw project slechts een kleine hoeveelheid CSS nodig heeft, is het gebruik van een CSS-preprocessor misschien overdreven.

Als u een groot project bouwt, misschien als onderdeel van een team, dat afhankelijk is van een enorme hoeveelheid CSS, overweeg dan om een ​​preprocessor te gebruiken. Ze bieden functies zoals functies, loops en mixins die het gemakkelijker maken om complexe projecten te stylen.