6 caratteristiche native del preprocessore CSS

Italian (Italiano) translation by Tom Piccarreda (you can also view the original English article)

Utilizzare preprocessori come Sass, LESS e Stylus, ha sempre dato agli sviluppatori un maggiore controllo sui loro fogli di stile, ma il CSS nativo sta gradualmente eliminando il divario. Funzionalità CSS quali variabili, calc e mixins sono solo la punta dell'iceberg; Esaminiamo quali preprocessori attualmente stanno emergendo e come la logica nativa del CSS sta per cambiare il nostro modo di lavorare.

Immagine concessa da Brother Typeface on Envato Elements

L'età dei Preprocessori

Astrazioni di linguaggio come Sass, LESS e Stylus hanno inondato il mondo degli sviluppatori dando loro variabili, mixins, funzioni e molto altro. Questi preprocessori hanno offerto agli sviluppatori le caratteristiche mancanti che CSS non era in grado di fornire. Tuttavia, il CSS non deve essere considerato come “logic-less”. Con i CSS in costante movimento ci stiamo già pregustando scorci del futuro; un futuro in cui ci sfideremo con i preprocessori.

1. Mixin It Up

In genere associamo “mixins” con i preprocessori; gruppi di dichiarazioni CSS che è possibile riutilizzare in tutto il progetto. Un mixin può essere utilizzato come supporto autonomo, oppure è possibile passare valori come argomenti per renderlo più flessibile.

Ecco un esempio di Sass @mixin chiamato font-size.

1	@mixin font-size($size, $base) {
2	font-size: $size; // fallback for old browsers
3	font-size: ($size / $base) * 1rem;
4	}

Il mixin sopra accetterà argomenti per $size, $base e viene utilizzato in una dichiarazione di @include con la possibilità di regolare gli argomenti a seconda del contesto.

/* Sass Call */
body {
    @include font-size(14, 16);
}

/* CSS output */
body {
  font-size: 14px;
  font-size: 0.875rem;
}

Il risultato è un valore rem impostato per font-size con un px fallback per browser che non supportano rem. Preprocessori mixin come questo hanno salvato agli sviluppatori innumerevoli ore di lavoro nel corso degli anni.

Mixins nativi per CSS sono attualmente in fase di sviluppo, ma esiste già un'implementazione operativa in Chrome. Se hai già lavorato con le variabili CSS, il codice seguente sarà abbastanza familiare.

:root {
    --pink-theme: {
        background: #F64778;
    }
}

Fate attenzione che il codice sopra riportato genererà sicuramente un errore di sintassi. Questo modo di scrivere un mixin CSS utilizza una nuova regola denominata @apply simile a quello che conosciamo in Sass come @include.

1	body {
2	@apply --pink-theme;
3	}

Proprio come abbiamo familiarità con Sass utilizzando @include avremmo potuto usare @apply per CSS!

Si può provare questo esperimento all'interno di Chrome abilitando un flag sotto chrome://flags/#enable-experimental-web-platform-features.

2. La Matematica

Ricordi quando i preprocessori erano gli unici strumenti di stile capaci di fare calcoli matematici? Adesso non è più cosi. Con calc() possiamo prendere quei fastidiosi numeri e trasformarli in nuovi valori in base alle tue necessità di calcolo.

1	nav {
2	margin: calc(1rem - 2px) calc(1rem - 1px);
3	}

Questo è il bello di calc(); possiamo estendere la forza del CSS fin nella stratosfera. Addizioni? Sottrazioni? Divisioni? Moltiplicazioni? Calc in grado di gestire facilmente tutto questo e altro ancora.

Se volete saperne di più calc() dai un'occhiata alle specifiche W3C. Il supporto browser è anche solido come una roccia secondo Can I Use.

3. Passare la Variabile

Le variabili native per i CSS sono finalmente arrivate. Sono un'opzione reale e tangibile per gli sviluppatori, anche se ci è voluto del tempo per imparare dai preprocessori.

Ecco un esempio di sintassi per le Variabili Sass:

$spacing-unit: 20px;

main {
    margin: $spacing-unit;
    padding: $spacing-unit;
}

Le variabili Sass sono contrassegnate con il segno del dollaro $, ma hanno un aspetto un po' diverso in CSS:

:root {
    --primary-color: skyblue;
}

nav.primary {
  background: var(--primary-color);
}

Per le variabili CSS vengono utilizzati due trattini -- e sono in genere collocate all'interno della :root per l'accesso globale; anche se il loro campo di applicazione può essere ristretto inserendoli all'interno delle dichiarazioni specifiche del selettore.

1	div {
2	color: var(--my-var, red);
3	}

Le variabili possono anche accettare un valore di fallback se esse non sono ancora state definite, come nel caso dell'esempio precedente. Il supporto del browser non è male, tranne Edge che offre solo un supporto parziale. La specifica è inoltre in fase di candidatura, leggi qui per saperne di più.

4. Annidare il codice

La nidificazione del codice è una caratteristica di molti preprocessori e permette di posizionare selettori all'interno di una dichiarazione esistente. In genere, nidificazione nel Sass è simile a questo esempio:

ul {
    margin: 20px auto;
    li {
        font-size: 12px;
        a {
            text-decoration: none;
        }
    }
}

La nidificazione può diventare inefficace e farti trovare in guai seri quando si effettuano lunghe catene di selettori. Per questo motivo è consigliabile attenersi all'Inception Rule e mantenere la nidificazione a non più di tre o quattro livelli di profondità.

Nonostante la nidificazione può essere pericolosa, solitamente risulta essere molto utile se ci si prende il tempo di codificarla attentamente. Ecco uno sneak peek di come potrebbe apparire per il CSS nativo:

/* CSS Nesting */
nav {
  color: #222;
  &.primary {
    background: maroon;
  }
}

/* Result */
nav {
    color: #222;
}

nav.primary {
    background: maroon;
}

Proprio come siamo abituati con i nostri alleati del preprocessore, la nidificazione nativa del CSS si presta gli stessi principi, ma senza la necessità di compilare il codice. Dai uno sguardo alla specifica di Tab Atkins per la nidificazione del CSS nativo.

5. Estendere le Regole

"Extends" è un altro modo per passare proprietà e valori e condividerli tra le dichiarazioni. In Sass ci siamo abituati ad applicare la seguente sintassi:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Si può vedere che inizia con la definizione di stili per .message, poi offre tre varianti diversi border-colors. Ogni variante prima estende .message, quindi eredita tutte le sue regole di stile prima di cambiare il colore del bordo.

Un'altra sintassi identica all'esempio precedente è stata elaborata da Tab Atkins come una potente specifica per il CSS nativo. Che siate o no, d'accordo con le funzionalità di extends (i cui benefici sono oggetto di accesi dibattiti) è comunque interessante vedere i puristi del CSS abbracciare idee partorite dai preprocessori.

6. Lavorare con i colori

Se mai vi trovaste ad utilizzare le funzioni di modifica del colore del preprocessore, apprezzerete sicuramente questa funzionalità in CSS nativo. La funzione color-mod() accetta un colore esistente e applica zero o più "modificatori di colore" che specificano come modificare il risultato finale.

1	nav {
2	background: color-mod(#79d3e2 hue(360) saturation(100%));
3	}

Lo sviluppo è nelle sue fasi iniziali, e nonstante ci sono vari polyfills disponibili la sintassi cambia frequentemente (ad esempio l'attuale color-mod usato come color).

Tyler Gaw ha realizzato uno strumento veramente utile (colorme.io) che ti permette di sperimentare tutti i colori disponibili.

Le specifiche per la funzione color-mod() sono attualmente in fase di realizzazione tramite il CSS Working Group.

Considerazioni Finali

Allo stesso modo in cui jQuery ha contribuito a rendere il Web migliore, così i preprocessori stanno effettivamente portando il CSS su di un livello superiore. Linguaggi come il Sass stanno spianando la strada a nuove idee e approcci non ancora considerati dagli sviluppatori delle specifiche CSS.

Spero che le nuove funzionalità di cui abbiamo parlato possano ispirarti nel tuo lavoro; L'utilizzo delle funzionalità native attraverso il preprocessore è una soluzione moderna e funzionale che andrebbe sempre incoraggiata!