Ce este Stylus CSS și cum îl folosiți?

Când vine vorba de dezvoltarea web, cel mai comun mod de a stila o aplicație este utilizarea CSS. Cu toate acestea, CSS poate fi greoi de lucrat, deoarece este notoriu dificil de depanat.

Aflați cum să utilizați Stylus CSS și veți avea o altă opțiune, cu unul dintre cele mai populare preprocesoare CSS disponibile.

Ce este un preprocesor CSS?

Preprocesoarele CSS sunt utilitare care facilitează scrierea CSS. Ei compilează adesea cod din propria sintaxă personalizată la .css format pe care browserele îl pot înțelege.

Preprocesoarele CSS precum Sass, de exemplu, oferă caracteristici speciale precum bucle, mixuri, selectoare imbricate și instrucțiuni if/else. Aceste caracteristici facilitează întreținerea codului dvs. CSS, în special în echipele mari.

Pentru a utiliza un procesor CSS, trebuie să instalați compilatorul în mediul local și/sau serverul de producție. Unele instrumente de construire de front-end, cum ar fi Vite, vă permit să includeți

Preprocesoare CSS precum LessCSS în proiectul tău.

Cum funcționează Stylus CSS

Pentru a instala Stylus în mediul local, aveți nevoie de Node.js și de oricare Node Package Manager (NPM) sau Fire instalată pe mașina dvs. Rulați următoarea comandă de terminal:

npm instalează stylus

Sau:

fire adăuga stilou

Fiecare fișier CSS Stylus se termină cu a .stil extensie. După ce ați scris codul Stylus CSS, îl puteți compila cu această comandă:

stilou .

Aceasta ar trebui să compileze toate .stil fișiere și rezultate .css fișierele din directorul curent. Compilatorul Stylus face de asemenea posibilă compilarea .css fișiere în .stil cu --css steag. Pentru a converti a .css dosar la .stil format, utilizați această comandă:

stylus --css style.css style.styl

Sintaxă și selectoare de părinți în Stylus CSS

În CSS tradițional, definiți un bloc de stil cu acolade; neincluderea acestor personaje va duce la stiluri sparte. În Stylus CSS, folosirea acoladelor este opțională.

Stylus acceptă o sintaxă asemănătoare Python, ceea ce înseamnă că puteți defini blocuri folosind în schimb indentări, astfel:

.container
marginea: 10px

Blocul de cod de mai sus se compilează în următorul CSS:

.container {
marginea: 10px;
}

La fel ca în preprocesoarele CSS precum Less, puteți face referire la un selector părinte cu ajutorul & caracter:

buton
culoare: alb;
 &:planare
culoare: galben;

Care se compilează la:

buton {
culoare: #fff;
}
buton:planare {
culoare: #ff0;
}

Cum se utilizează variabile în Stylus CSS

În preprocesoarele CSS precum Less CSS, definiți variabile cu @ caracter, în timp ce CSS tradițional folosește „--” pentru a defini o variabilă.

În Stylus, lucrurile stau puțin diferit: nu aveți nevoie de un simbol special pentru a defini o variabilă. În schimb, definiți variabila folosind un semn egal (=) pentru a-l lega de o valoare:

bg-culoare = negru

Acum puteți utiliza variabila în .stil fisier ca acesta:

div
culoare de fundal: bg-culoare

Blocurile de cod de mai sus se compilează în următorul CSS:

div {
culoare de fundal: #000;
}

Puteți defini o variabilă nulă cu paranteze. De exemplu:

variabilă goală = ()

Puteți face referire la alte valori de proprietate folosind @ simbol. De exemplu, dacă doriți să setați înălțimea unui div să fie jumătate din lățimea sa, puteți face următoarele:

lățime-element = 563px
div
lăţime: lățime-element
înălţime: (lățime-element / 2)

Asta ar funcționa, dar puteți, de asemenea, să evitați crearea cu totul a variabilei și să faceți referire la lăţime valoarea proprietatii in schimb:

div
lăţime: 563px
înălţime: (@lăţime / 2)

În acest bloc de cod, @ simbolul vă permite să faceți referire la real lăţime proprietate de pe div. Indiferent de abordarea pe care o alegeți, atunci când compilați .stil fișier, ar trebui să obțineți următorul CSS:

div {
lăţime: 563px;
înălţime: 281.5px;
}

Funcții în Stylus CSS

Puteți crea funcții care returnează valori în Stylus CSS. Să presupunem că doriți să setați aliniere text proprietatea unui div de a „centra” dacă lăţime este mai mare de 400 px sau „stânga” dacă lăţime este mai mic de 400px. Puteți crea o funcție care se ocupă de această logică.

Aliniere la centru(n)
dacă (n > 400)
 'centru'
altfeldacă (n < 200)
 'stânga'
div {
lăţime: 563px
aliniere text: Aliniere la centru(@lăţime)
înălţime: (@lăţime / 2)
}

Acest bloc de cod apelează Aliniere la centru funcția, trecând lăţime valoarea proprietății prin referirea acesteia cu @ simbol. The Aliniere la centru funcția verifică dacă parametrul său, n, este mai mare de 400 și returnează „centru” dacă este. Dacă n este mai mică de 200, funcția returnează „stânga”.

Când compilatorul rulează, ar trebui să producă următoarea ieșire:

div {
lăţime: 563px;
aliniere text: 'centru';
înălţime: 281.5px;
}

În majoritatea limbajelor de programare, funcțiile atribuie parametri în funcție de ordinea în care îi furnizați. Acest lucru poate duce la greșeli ca urmare a trecerii parametrilor în ordinea greșită, ceea ce este mai probabil cu cât trebuie să treceți mai mulți parametri.

Stylus oferă o soluție: parametrii numiți. Folosiți-le în locul parametrilor ordonați atunci când apelați o funcție, astfel:

scădea(b:30px, A:10px)/*-20px*/

Când să utilizați un preprocesor CSS

Preprocesoarele CSS sunt utilitare foarte puternice pe care le puteți folosi pentru a vă simplifica fluxul de lucru. Alegerea instrumentului potrivit pentru proiectul dvs. vă poate ajuta să vă îmbunătățiți productivitatea. Dacă proiectul dvs. are nevoie doar de o cantitate mică de CSS, atunci utilizarea unui preprocesor CSS ar putea fi exagerată.

Dacă construiți un proiect mare, poate ca parte a unei echipe, care se bazează pe o cantitate mare de CSS, luați în considerare utilizarea unui preprocesor. Acestea oferă funcții precum funcții, bucle și mixuri care facilitează stilarea proiectelor complexe.