Che cos'è Stylus CSS e come si usa?

Quando si tratta di sviluppo web, il modo più comune per definire lo stile di un'applicazione è utilizzare i CSS. Tuttavia, i CSS possono essere complicati con cui lavorare perché è notoriamente difficile eseguire il debug.

Scopri come utilizzare Stylus CSS e avrai un'altra opzione, con uno dei preprocessori CSS più popolari disponibili.

Che cos'è un preprocessore CSS?

I preprocessori CSS sono utilità che semplificano la scrittura di CSS. Spesso compilano il codice dalla loro sintassi personalizzata al file .css formato che i browser possono comprendere.

I preprocessori CSS come Sass, ad esempio, offrono funzionalità speciali come loop, mixin, selettori nidificati e istruzioni if/else. Queste funzionalità semplificano la manutenzione del codice CSS, specialmente nei team di grandi dimensioni.

Per utilizzare un processore CSS, devi installare il compilatore nel tuo ambiente locale e/o nel server di produzione. Alcuni strumenti di creazione di frontend, come Vite, ti consentono di includere

Preprocessori CSS come LessCSS nel tuo progetto.

Come funziona lo stilo CSS

Per installare Stylus nel tuo ambiente locale, hai bisogno di Node.js e di entrambi Node Package Manager (NPM) o Yarn installato sulla tua macchina. Esegui il seguente comando da terminale:

stilo di installazione npm

O:

filato aggiungere stilo

Ogni file Stylus CSS termina con un'estensione .stile estensione. Una volta che hai scritto il tuo codice Stylus CSS, puoi compilarlo con questo comando:

stilo.

Questo dovrebbe compilare tutti i file .stile file e output .css file nella directory corrente. Il compilatore Stylus rende anche possibile la compilazione .css file in .stile con il --css bandiera. Per convertire un .css file al .stile formato, usa questo comando:

stylus --css style.css style.styl

Sintassi e selettori parent in Stylus CSS

Nel CSS tradizionale, definisci un blocco di stile con parentesi graffe; la mancata inclusione di questi caratteri porterà a stili interrotti. In Stylus CSS, l'uso delle parentesi graffe è facoltativo.

Stylus supporta una sintassi simile a Python, il che significa che puoi definire i blocchi usando invece i rientri, come questo:

.contenitore
margine: 10px

Il blocco di codice sopra viene compilato nel seguente CSS:

.contenitore {
margine: 10px;
}

Proprio come nei preprocessori CSS come Less, puoi fare riferimento a un selettore genitore con il & carattere:

pulsante
colore: bianco;
 &: al passaggio del mouse
colore: giallo;

Che compila in:

pulsante {
colore: #F F F;
}
pulsante: al passaggio del mouse {
colore: #ff0;
}

Come utilizzare le variabili in Stylus CSS

Nei preprocessori CSS come Less CSS, definisci le variabili con il @ carattere, mentre i CSS tradizionali usano "--" per definire una variabile.

In Stylus le cose sono leggermente diverse: non è necessario un simbolo speciale per definire una variabile. Invece, basta definire la variabile usando un segno di uguale (=) per associarlo a un valore:

bg-colore = nero

È ora possibile utilizzare la variabile nel file .stile file come questo:

div
colore di sfondo: bg-colore

I blocchi di codice sopra compilati nel seguente CSS:

div {
colore di sfondo: #000;
}

È possibile definire una variabile nulla con parentesi. Per esempio:

variabile vuota = ()

È possibile fare riferimento ad altri valori di proprietà utilizzando il @ simbolo. Ad esempio, se desideri impostare l'altezza di un div su metà della sua larghezza, puoi procedere come segue:

larghezza dell'elemento = 563px
div
larghezza: larghezza dell'elemento
altezza: (larghezza dell'elemento / 2)

Funzionerebbe, ma puoi anche evitare di creare del tutto la variabile e fare riferimento a larghezza valore della proprietà invece:

div
larghezza: 563px
altezza: (@larghezza / 2)

In questo blocco di codice, il @ Il simbolo consente di fare riferimento all'effettivo larghezza proprietà sul div. Indipendentemente dall'approccio scelto, quando si compila il file .stile file, dovresti ottenere il seguente CSS:

div {
larghezza: 563px;
altezza: 281.5px;
}

Funzioni in Stylus CSS

Puoi creare funzioni che restituiscono valori in Stylus CSS. Diciamo che vuoi impostare il allineamento del testo proprietà di un div a "center" se il larghezza è maggiore di 400px, o "sinistra" se il larghezza è inferiore a 400px. È possibile creare una funzione che gestisca questa logica.

allinea al centro(N)
Se (N > 400)
 'centro'
altroSe (N < 200)
 'Sinistra'
div {
larghezza: 563px
allineamento del testo: allinea al centro(@larghezza)
altezza: (@larghezza / 2)
}

Questo blocco di codice chiama il file allinea al centro funzione, passando il larghezza valore della proprietà facendo riferimento ad esso con il @ simbolo. IL allinea al centro funzione controlla se il suo parametro, N, è maggiore di 400 e restituisce "center" se lo è. Se N è minore di 200, la funzione restituisce "sinistra".

Quando il compilatore viene eseguito, dovrebbe produrre il seguente output:

div {
larghezza: 563px;
allineamento del testo: 'centro';
altezza: 281.5px;
}

Nella maggior parte dei linguaggi di programmazione, le funzioni assegnano i parametri in base all'ordine in cui vengono forniti. Questo può portare a errori a causa del passaggio di parametri nell'ordine sbagliato, il che è tanto più probabile quanto più parametri devi passare.

Stylus fornisce una soluzione: parametri con nome. Usali al posto dei parametri ordinati quando chiami una funzione, come questa:

sottrarre(B:30px, UN:10px)/*-20px*/

Quando utilizzare un preprocessore CSS

I preprocessori CSS sono utility molto potenti che puoi utilizzare per semplificare il tuo flusso di lavoro. Scegliere lo strumento giusto per il tuo progetto può aiutarti a migliorare la tua produttività. Se il tuo progetto richiede solo una piccola quantità di CSS, l'utilizzo di un preprocessore CSS potrebbe essere eccessivo.

Se stai costruendo un grande progetto, magari come parte di un team, che si basa su un'enorme quantità di CSS, prendi in considerazione l'utilizzo di un preprocessore. Offrono funzionalità come funzioni, loop e mixin che semplificano lo stile di progetti complessi.