Share
La community di sviluppo web ha ricevuto di recente grandi novità. Anche se non siamo ancora nei nightly, le sperimentazioni sono, ancora una volta, in corso, che ci forniranno un supporto nativo per variabili CSS, mixin e moduli nei browser. La domanda è, però, è una buona cosa?
Prima di progredire, tieni presente che questi sviluppi sono ancora solo nelle fasi sperimentali. Non sono ancora stati implementati in nessun browser.
Se hai una modesta familiarità con i preprocessori CSS, come Less o SASS, avrai una comprensione di base di cosa aspettarti da queste aggiunte. (Ciò detto, la sintassi proposta sfortunatamente è un po 'diversa.) In futuro, avrai la possibilità di creare variabili (globali e locali) e mixin, che puoi considerare come una collezione di stili che può essere facilmente riferimento.
Finché posso ricordare, la comunità ha chiesto a gran voce le variabili CSS; quindi qual è stata la presa in carico? In una parola: disaccordo. Infatti, già nel 2008, il webkit si stava divertendo con questa funzione, fino al punto di implementarla nei nightly, anche se la proposta si è bloccata non molto tempo dopo. Molti pensavano che la trasformazione dei CSS in qualcosa di più programmatore-like il linguaggio introdurrebbe solo frustrazione; alcuni pensavano addirittura che potesse confondere i designer. Ad esempio, se il colore primario del progetto è memorizzato in una variabile, presumibilmente nella parte superiore del foglio di stile, richiederebbe al progettista di fare riferimento a due posizioni.
@ MyColor: rosso;
/ * Meno sintassi * / #someElem color: @myColor;
Sebbene questo argomento sia valido in una certa misura, non ha molto peso. La maggior parte dei designer mantiene un insieme di sito-colori nella parte superiore del loro foglio di stile, che usano come riferimento. L'introduzione di variabili per contenere questi valori è una soluzione logica.
I fan di Less o SASS saranno abituati a definire variabili in questo modo:
/ * Less * / @primary_color: red; / * SASS * / $ primary_color: rosso;
La sintassi proposta complica un po 'le cose rendendo le variabili digitate. Per esempio:
/ * Dichiarazione * / @var primary_color colore rosso; / * Uso * / body color: var (primary_color);
Accentsconagua
@var colore parola chiave nel codice sopra. var funzione e passare il nome della variabile. Devo ammettere: sembra un po 'ridondante usare il @var direttiva. La sintassi utilizzata da SASS e Less sembra più appropriata e più pulita. @myVar è più succinto di @var myVar.
I tipi di variabili sono un'aggiunta benvenuta, d'altra parte.
Le variabili sono state digitate. Esistono tutti i tipi di valore primitivo, ogni proprietà e alcuni tipi di convenienza aggiuntivi. Questo ci permette di esporre il nuovo materiale CSSOM su di loro:
document.styleSheets [0] .vars ['primary_color']. alpha = .5;
-- xanthir.com
Le variabili avranno anche la possibilità di essere portate ad una casella di dichiarazione, tramite l'uso di @Locale direttiva. Questo può essere utile quando una variabile deve essere utilizzata solo una o due volte all'interno di un progetto.
.box / * Declaration * / @local box_gradient background-gradient gradient (top, black, white); / * Utilizzo * / background: var (box_gradient);
I missaggi possono essere incredibilmente utili. In effetti, abbiamo discusso del processo di creazione di un file di classe di missaggi diversi non molto tempo fa su Nettuts +. Puoi leggerlo qui - anche se tieni a mente che le tecniche presentate in quell'articolo si basano sul meno preprocessore. I nuovi esperimenti, ancora, usano una sintassi leggermente diversa.
/ * Minore * / .border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; / * SASS * / @mixin border-radius ($ radius: 3px) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; raggio-bordo: raggio $; / * E forse la soluzione nativa ?? * / @mixin border-radius (raggio di lunghezza 3px) -webkit-border-radius: var (raggio); -moz-border-radius: var (raggio); border-radius: var (raggio);
Notare le somiglianze tra SASS e la soluzione nativa proposta per i mixin. Ciò è dovuto al fatto che i membri del team SASS servono come consulenti.
Come forse saprai, Less e SASS ti permettono di farlo nido selettori. Questo può ridurre drasticamente la dimensione dei fogli di stile, poiché rimuove ripetutamente la necessità di utilizzare lo stesso selettore.
/ * Il modo corrente * / #content ... #content p ... #content pa ... #content pa: hover ... / * Less e SASS * / #content ... p ... a ... & : hover ... / * E in modo nativo ?? * / #content ... @questo> p ... @questo> a ... @questo: hover ...
Mentre la sintassi proposta è più verboso, al suo attivo, ha una bella sintassi simile a OO, che farà sentire molti sviluppatori a proprio agio.
Ma ricorda: non tutti i designer sono sviluppatori.
Di default in Less, tutte le variabili sono - a tutti gli effetti - globali. Di conseguenza, diventa difficile distribuire il codice, poiché i nomi delle variabili esistenti possono essere sovrascritti. La potenziale soluzione nativa sarà implementare moduli, o spazi dei nomi. Possono quindi essere incluso in un blocco aggiungendo il @uso direttiva.
@module Site @var primary_color color # 292929; @var secondary_color colore blu; @mixin border-radius (raggio di lunghezza 3px) ... border-radius: 3px; / * Uso errato * / body color: var (primary_color); // Il nome della variabile non è definito / * Correggi * / body @use Site; color: var (primary_color); // # 292929 (Works)
Come notato all'inizio di questo articolo, la documentazione sopra elencata è ancora in fase sperimentale. È possibile - probabilmente anche - che la sintassi cambierà, in base a il tuo risposta. Quindi facciamolo. L'idea delle variabili native nei mixins nel tuo CSS ti eccita ... o ti spaventa?
Me? Beh, io sono d'accordo. Penso che la sintassi proposta potrebbe usare un po 'di lavoro, poiché senza dubbio spaventerà i designer tra di noi. Detto questo, se la sintassi è stata semplificata un po ', sono al 100% a bordo. E tu?
