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.

Cuprins

Ce este un preprocesor CSS?

Preprocesoarele CSS sunt utilitare care facilitează scrierea CSS. Ei compilează adesea codul din propria sintaxă personalizată în formatul .css 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 a front-end, cum ar fi Vite, vă permit să includeți preprocesoare CSS precum LessCSS în proiectul dvs.

Cum funcționează Stylus CSS

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

 npm install stylus

 yarn add stylus

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

 stylus .

Aceasta ar trebui să compileze toate fișierele .styl și să scoată fișierele .css din directorul curent. Compilatorul Stylus face, de asemenea, posibilă compilarea fișierelor .css în .styl cu indicatorul –css. Pentru a converti un fișier .css în formatul .styl, 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ă.

Cum să eliminați aplicațiile și paginile de pe ecranul de pornire al iPhone-ului dvs

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

 .container
    margin: 10px

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

 .container {
  margin: 10px;
}

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

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

Care se compilează la:

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

Cum se utilizează variabile în Stylus CSS

În preprocesoarele CSS precum Less CSS, definiți variabile cu caracterul @, î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 o lega la o valoare:

 bg-color = black

Acum puteți utiliza variabila din fișierul .styl astfel:

 div
    background-color: bg-color

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

 div {
  background-color: #000;
}

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

 empty-variable = ()

Puteți face referire la alte valori de proprietate folosind simbolul @. 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:

 element-width = 563pxdiv
    width: element-width
    height : (element-width / 2)

Acest lucru ar funcționa, dar puteți, de asemenea, să evitați crearea variabilei cu totul și să faceți referire la valoarea proprietății lățime:

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

În acest bloc de cod, simbolul @ vă permite să faceți referire la proprietatea lățimii reale din div. Indiferent de abordarea pe care o alegeți, atunci când compilați fișierul .styl, ar trebui să obțineți următorul CSS:

 div {
  width: 563px;
  height: 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 proprietatea de aliniere a textului unui div la „centru” dacă lățimea este mai mare de 400 px, sau la „stânga” dacă lățimea este mai mică de 400 px. Puteți crea o funcție care se ocupă de această logică.

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

Acest bloc de cod apelează funcția alignCenter, transmițând valoarea proprietății width prin referirea acesteia cu simbolul @. Funcția alignCenter verifică dacă parametrul său, n, este mai mare de 400 și returnează „center” dacă este. Dacă n este mai mic de 200, funcția returnează „stânga”.

Cum să personalizați Căutarea Spotlight pe iPhone și iPad

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

 div {
  width: 563px;
  text-align: 'center';
  height: 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:

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

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.