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.
Sommario:
Che cos’è un preprocessore CSS?
I preprocessori CSS sono utilità che semplificano la scrittura di CSS. Spesso compilano il codice dalla loro sintassi personalizzata nel formato .css 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 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, devi aver installato Node.js e Node Package Manager (NPM) o Yarn sulla tua macchina. Esegui il seguente comando da terminale:
npm install stylus
O:
yarn add stylus
Ogni file Stylus CSS termina con un’estensione .styl. Dopo aver scritto il codice Stylus CSS, puoi compilarlo con questo comando:
stylus .
Questo dovrebbe compilare tutti i file .styl e produrre file .css nella directory corrente. Il compilatore Stylus rende anche possibile compilare file .css in .styl con il flag –css. Per convertire un file .css nel formato .styl, 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:
.container
margin: 10px
Il blocco di codice sopra viene compilato nel seguente CSS:
.container {
margin: 10px;
}
Proprio come nei preprocessori CSS come Less, puoi fare riferimento a un selettore genitore con il carattere &:
button
color: white;
&:hover
color: yellow;
Che compila in:
button {
color: #fff;
}button:hover {
color: #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 associarla a un valore:
bg-color = black
Ora puoi usare la variabile nel file .styl in questo modo:
div
background-color: bg-color
I blocchi di codice sopra compilati nel seguente CSS:
div {
background-color: #000;
}
È possibile definire una variabile nulla con parentesi. Per esempio:
empty-variable = ()
È 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:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Funzionerebbe, ma puoi anche evitare di creare del tutto la variabile e fare invece riferimento al valore della proprietà width:
div
width: 563px
height: (@width / 2)
In questo blocco di codice, il simbolo @ consente di fare riferimento alla proprietà di larghezza effettiva sul div. Indipendentemente dall’approccio scelto, quando compili il file .styl, dovresti ottenere il seguente CSS:
div {
width: 563px;
height: 281.5px;
}
Funzioni in Stylus CSS
Puoi creare funzioni che restituiscono valori in Stylus CSS. Diciamo che vuoi impostare la proprietà text-align di un div su “center” se la larghezza è maggiore di 400px, o “left” se la larghezza è minore di 400px. È possibile creare una funzione che gestisca questa logica.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Questo blocco di codice chiama la funzione alignCenter, passando il valore della proprietà width facendovi riferimento con il simbolo @. La funzione alignCenter controlla se il suo parametro, n, è maggiore di 400 e restituisce “center” se lo è. Se n è minore di 200, la funzione restituisce “left”.
Quando il compilatore viene eseguito, dovrebbe produrre il seguente output:
div {
width: 563px;
text-align: 'center';
height: 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:
subtract(b:30px, a:10px)
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.