Share
L'uso di 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 riducendo il divario. Le funzioni CSS come variabili, calc e mixin sono solo la punta dell'iceberg; esaminiamo cosa ci stanno aiutando i preprocessuali e come la logica CSS nativa cambierà il modo in cui facciamo le cose.
Grafica da Brother Typeface su Envato ElementsAstrazioni linguistiche come Sass, LESS e Stylus hanno fatto esplodere i mondi degli sviluppatori dando loro variabili, mixin, funzioni, estensioni e molto altro. Questi preprocessuali compilavano funzionalità mancanti che il CSS non era in grado di fornire.
Tuttavia, i CSS non dovrebbero più essere pensati come "privi di logica" senza la presenza dell'intelletto. Con i CSS in procinto di perfezionarsi, stiamo già intravvidendo il futuro: un futuro che competerà con i preprocessori.
In genere associamo "mixin" a preprocessor, gruppi di dichiarazioni CSS che puoi riutilizzare in un progetto. Un mixin può essere usato come helper standalone oppure puoi passare valori come argomenti per renderlo più flessibile.
Ecco un Sass @mixin esempio chiamato dimensione del font.
@mixin font-size ($ size, $ base) font-size: $ size; // fallback per i vecchi browser font-size: ($ size / $ base) * 1rem;
Il mixin sopra accetterà argomenti per $ dimensioni e $ di base, ed è usato in un @includere dichiarazione con la possibilità di regolare gli argomenti a seconda del contesto.
/ * Sass Call * / body @include font-size (14, 16); / * Output CSS * / body dimensione carattere: 14px; font-size: 0.875rem;
Il risultato è a rem valore basato per dimensione del font con un px fallback per i browser che non supportano rem. Mixer preprocessoristi come questo hanno salvato gli sviluppatori innumerevoli ore nel corso degli anni.
I mixin nativi CSS sono attualmente una bozza degli editor, ma hanno anche un'implementazione funzionante in Chrome. Se hai già giocato con le variabili CSS, lo snippet seguente apparirà abbastanza familiare.
: root --pink-theme: background: # F64778;
Fai attenzione che il codice sopra renderà sicuramente il tuo evidenziatore della sintassi molto utile. Questo modo di scrivere un mixin CSS usa una nuova regola chiamata @applicare, simile a quello che sappiamo in Sass come @includere.
body @apply --pink-theme;
Proprio come noi abbiamo familiarità con Sass @includere, potremmo eventualmente averlo @applicare per CSS!
Puoi provare questo esperimento in Chrome attivando un flag sotto chrome: // flags / # enable-sperimentali-piattaforma web-caratteristiche.
Ricordi quando i preprocess erano gli unici strumenti di stile capaci di ginnastica matematica? Bene, non è più così. Con Calc (), possiamo prendere quei numeri fastidiosi e mutarli in nuovi valori basati sull'aritmetica desiderata.
nav margin: calc (1rem - 2px) calc (1rem - 1px);
Questa è la bellezza di Calc (); alla fine estende i poteri dei CSS nella stratosfera. Preferire l'aggiunta? Sottrazione? Divisione? Moltiplicazione? Calc può gestire tutto questo e altro.
Se desideri saperne di più Calc (), la specifica W3C ha tutto ciò di cui hai bisogno per renderti sonnolento e felice allo stesso tempo. Anche il supporto del browser è solido, secondo Can I Use.
Le variabili native per i CSS sono finalmente qui. Sono un'opzione reale e tangibile per gli sviluppatori, anche se ci è voluto del tempo per imparare dai preprocessori.
Ecco come si presenta la sintassi della variabile di Sass:
$ spacing-unit: 20px; main margin: $ spacing-unit; padding: $ spacing-unit;
Le variabili Sass sono denotate con un dollaro $ firmare, ma in CSS hanno un aspetto leggermente diverso:
: root --primary-color: skyblue; nav.primary background: var (- primary-color);
Le variabili CSS sono contraddistinte da un doppio trattino -- e sono in genere collocati all'interno :radice per l'accesso globale, sebbene la loro portata possa essere rafforzata ponendoli all'interno di specifiche dichiarazioni di selezione.
div color: var (- my-var, red);
Le variabili possono anche accettare un valore di fallback se non sono ancora definite, come nel caso dell'esempio sopra. Anche il supporto del browser non è male, con Edge che mostra supporto parziale. Lo spec è anche nella fase di raccomandazione del candidato per il tuo piacere di lettura.
L'annidamento è una funzionalità di molti preprocessori che consente di posizionare selettori dentro una dichiarazione esistente. In genere, l'annidamento in Sass ha un aspetto simile al seguente:
ul margin: 20px auto; li font-size: 12px; a decorazione del testo: nessuna;
La nidificazione può diventare ingombrante e farti avvolgere in un sacco di problemi, con il risultato di catene di selettori incredibilmente lunghe. Per questo motivo, è consigliabile attenersi alla Regola di inizio e mantenere l'annidamento a non più di tre o quattro livelli di profondità.
Anche se il piazzamento può essere pericoloso, può essere utile se si prende il tempo per essere consapevoli. Ecco un'anteprima di come potrebbe alla fine cercare il CSS nativo:
/ * Nidificazione CSS * / nav color: # 222; & .primary background: maroon; / * Risultato * / nav color: # 222; nav.primary background: maroon;
Proprio come siamo abituati con i nostri alleati del preprocessore, la nidificazione CSS nativa ci presta gli stessi principi, ma senza la necessità di compilare il linguaggio. C'è una bozza delle specifiche di Tab Atkins su questa caratteristica per la nidificazione CSS nativa.
"Estendi" sono un altro modo per passare proprietà e valori intorno, condividendoli tra dichiarazioni. In Sass, ci siamo abituati ad applicare la seguente sintassi:
.message border: 1px solid #ccc; imbottitura: 10px; colore: # 333; .successo @extend .message; border-color: verde; .error @extend .message; border-color: rosso; .warning @extend .message; border-color: giallo;
Puoi vedere che iniziamo definendo gli stili per .Messaggio, e quindi offrire tre varianti con differenti border-colori. Prima ogni variante si estende .Messaggio, ereditando in tal modo tutte le sue regole di stile, prima di cambiare il colore del bordo.
La sintassi identica all'esempio precedente è ciò che viene elaborato da Tab Atkins come un'altra potenziale specifica per i CSS nativi. Che tu sia d'accordo o meno con l'estensione (una caratteristica i cui benefici sono fortemente discussi), è bello vedere i custodi di CSS abbracciare le idee avanzate dai preprocessori.
Se ti ritrovi a utilizzare le funzioni di manipolazione del colore del preprocessore, apprezzerai questa funzionalità nei CSS nativi. La funzione color-mod () prende un colore esistente e applica zero o più "regolatori colore" che specificano come manipolare il risultato finale.
nav background: color-mod (# 79d3e2 hue (360) saturazione (100%));
Lo sviluppo è nelle fasi iniziali e, sebbene siano disponibili polifraggi, la sintassi cambia frequentemente (la corrente colore-mod prima era colore, per esempio).
Tyler Gaw ha creato uno strumento davvero accurato (colorme.io) che ti consente di sperimentare tutti i possibili regolatori di colore disponibili.
colorme.ioLe specifiche per la funzione color-mod () sono attualmente in modalità bozza tramite il gruppo di lavoro CSS.
Allo stesso modo in cui jQuery ha contribuito a rendere il Web migliore, così infatti ha pre-processori quando si tratta di CSS. Lingue come Sass hanno contribuito a spianare la strada a nuove idee e approcci non ancora considerati dagli autori delle specifiche CSS.
Spero che le nuove funzionalità di cui abbiamo parlato ti ispirino a utilizzarle nel tuo lavoro; Vi incoraggio a considerare l'utilizzo della funzionalità nativa su un preprocessore, quando possibile!
Accentsconagua