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

de
Tweet
Share
Share
Pin

În domeniul dezvoltării web, stilizarea aplicațiilor web este frecvent realizată prin intermediul CSS. Cu toate acestea, CSS poate fi uneori dificil de gestionat, fiind cunoscut pentru complexitatea depanării sale.

Explorați avantajele utilizării Stylus CSS, o alternativă eficientă, care se distinge ca unul dintre cele mai populare preprocesoare CSS existente.

Ce reprezintă un preprocesor CSS?

Preprocesoarele CSS sunt instrumente care simplifică procesul de scriere CSS. Acestea transformă codul dintr-o sintaxă personalizată într-un format .css, care este compatibil cu navigatoarele web.

Preprocesoare CSS precum Sass oferă funcționalități avansate, inclusiv cicluri, mixin-uri, selectoare imbricate și instrucțiuni if/else. Aceste facilități contribuie la o întreținere mai eficientă a codului CSS, în special în cazul echipelor mari.

Pentru a utiliza un preprocesor CSS, trebuie să instalați compilatorul pe serverul local sau cel de producție. Unele instrumente de construire front-end, cum ar fi Vite, permit integrarea directă a preprocesoarelor CSS precum LessCSS în proiectul tău.

Cum funcționează Stylus CSS?

Pentru a instala Stylus pe sistemul tău, ai nevoie de Node.js și de Node Package Manager (NPM) sau Yarn. Poți instala Stylus folosind următoarea comandă în terminal:

 npm install stylus

Sau:

 yarn add stylus

Fiecare fișier Stylus CSS are extensia .styl. După ce ai scris codul Stylus, îl poți compila folosind această comandă:

 stylus .

Această comandă va compila toate fișierele .styl din directorul curent și va crea fișierele .css corespunzătoare. Compilatorul Stylus permite și conversia fișierelor .css în .styl folosind parametrul –css. Pentru a converti un fișier .css în format .styl, utilizează comanda:

 stylus --css style.css style.styl

Sintaxa și selectoarele parent în Stylus CSS

În CSS tradițional, un bloc de stil este definit cu ajutorul acoladelor. Lipsa acestora poate conduce la erori de stilizare. În Stylus CSS, utilizarea acoladelor este opțională.

Stylus utilizează o sintaxă similară cu Python, ceea ce înseamnă că poți defini blocuri folosind indentări:

 .container
    margin: 10px

Acest cod este compilat în următorul CSS:

 .container {
  margin: 10px;
}

Similar cu alte preprocesoare CSS, precum Less, poți face referire la un selector parent utilizând caracterul &:

 button
    color: white;
    &:hover
        color: yellow;

Acesta se va compila în:

 button {
  color: #fff;
}
button:hover {
  color: #ff0;
}

Cum utilizăm variabile în Stylus CSS?

În preprocesoarele CSS, cum ar fi Less, variabilele sunt definite cu caracterul @, în timp ce CSS-ul standard utilizează „–”.

În Stylus, modul de lucru este diferit. Nu ai nevoie de un simbol special pentru a defini o variabilă. În schimb, utilizezi semnul egal (=) pentru a atribui o valoare variabilei:

 bg-color = black

Acum, poți folosi variabila în fișierul .styl:

 div
    background-color: bg-color

Acest cod se compilează în următorul CSS:

 div {
  background-color: #000;
}

Poți defini o variabilă nulă utilizând paranteze. De exemplu:

 empty-variable = ()

Poți face referire la alte valori ale proprietăților utilizând simbolul @. De exemplu, dacă vrei ca înălțimea unui div să fie jumătate din lățimea sa, poți face așa:

 element-width = 563px
div
    width: element-width
    height : (element-width / 2)

Acest lucru funcționează, dar poți evita crearea variabilei și să faci referire direct la valoarea proprietății lățime:

 div
    width: 563px
    height: (@width / 2)

În acest caz, simbolul @ îți permite să te referi la proprietatea lățimii din div. Oricare ar fi abordarea aleasă, compilând fișierul .styl vei obține următorul CSS:

 div {
  width: 563px;
  height: 281.5px;
}

Funcții în Stylus CSS

În Stylus CSS poți crea funcții care returnează valori. Să presupunem că vrei să setezi alinierea textului unui div la „centru” dacă lățimea este mai mare de 400px, sau la „stânga” dacă lățimea este mai mică de 400px. Poți crea o funcție care să gestioneze această logică.

 alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'
div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}

Acest cod apelează funcția alignCenter, transmițând valoarea proprietății lățime prin referire cu ajutorul simbolului @. Funcția verifică dacă parametrul n este mai mare de 400 și returnează „centru” dacă este adevărat. Dacă n este mai mic de 200, funcția returnează „stânga”.

Când compilatorul este executat, acesta ar trebui să producă următorul rezultat:

 div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}

În majoritatea limbajelor de programare, parametrii funcțiilor sunt atribuiți în funcție de ordinea în care sunt furnizați. Acest lucru poate duce la erori ca urmare a trecerii parametrilor în ordinea greșită, mai ales dacă sunt mulți parametri de gestionat.

Stylus oferă o soluție: parametrii numiți. Îi poți utiliza în locul parametrilor ordonați atunci când apelezi o funcție:

 subtract(b:30px, a:10px)

Când să utilizăm un preprocesor CSS?

Preprocesoarele CSS sunt instrumente puternice, utile pentru a simplifica fluxul tău de lucru. Alegerea instrumentului potrivit pentru proiectul tău poate contribui la îmbunătățirea productivității. Dacă proiectul tău necesită doar o cantitate mică de CSS, utilizarea unui preprocesor CSS ar putea fi inutilă.

În cazul în care construiești un proiect complex, eventual ca parte a unei echipe, care se bazează pe o cantitate mare de CSS, ar trebui să iei în considerare utilizarea unui preprocesor. Acestea oferă funcții precum funcții, cicluri și mixin-uri, care facilitează gestionarea stilizării proiectelor ample.