Share
Sfruttare la vera potenza di un preprocessore CSS è un'avventura. Esistono innumerevoli linguaggi, sintassi e funzioni, tutti pronti per l'uso proprio adesso.
In questo articolo, tratteremo le varie funzionalità e i vantaggi dell'uso di tre diversi preprocessori: Sass, LESS e Stylus.
I preprocessori producono CSS che funzionano in tutti i browser.
I preprocessori CSS3 sono lingue scritte con l'unico scopo di aggiungere funzionalità fantasiose al CSS senza compromettere la compatibilità del browser. Lo fanno compilando il codice che scriviamo in CSS standard che può essere utilizzato in qualsiasi browser fino alle età della pietra. Ci sono migliaia di funzionalità che i preprocessori portano in tavola e in questo articolo tratteremo alcune di quelle pubblicizzate, e alcune di quelle non così pubblicizzate. Iniziamo.
La parte più importante della scrittura del codice in un preprocessore CSS è la comprensione della sintassi. Fortunatamente per noi, la sintassi è (o può essere) identica al normale CSS per tutti e tre i preprocessori.
Sass e LESS usano entrambi la sintassi CSS standard. Ciò rende estremamente facile la conversione di un file CSS esistente in un preprocessore. Sass usa il .SCSS estensione del file e LESS utilizza il .Di meno estensione. Il file base di Sass o LESS può essere configurato come di seguito:
/ * style.scss o style.less * / h1 color: # 0982C1;
Come avrai notato, questo è solo un normale CSS, che si compila perfettamente sia in Sass che in LESS.
È importante notare che Sass ha anche una sintassi più vecchia, che omette i punti e virgola e le parentesi graffe. Anche se questo è ancora in circolazione, lo è vecchio e non lo useremo oltre questo esempio. La sintassi utilizza il .insolenza estensione del file e assomiglia a questo:
/ * style.sass * / h1 color: # 0982c1
La sintassi per Stylus è molto più prolissa. Usando il .Styl estensione del file, Stylus accetta la sintassi CSS standard, ma accetta anche alcune altre varianti in cui parentesi, due punti e punto e virgola sono tutti facoltativi. Per esempio:
/ * style.styl * / h1 color: # 0982C1; / * omette parentesi * / h1 colore: # 0982C1; / * omette due punti e punto e virgola * / h1 colore # 0982C1
Anche l'utilizzo di diverse varianti nello stesso foglio di stile è valido, quindi il seguente verrà compilato senza errori.
h1 color # 0982c1 h2 font-size: 1.2em
Le variabili possono essere dichiarate e utilizzate in tutto il foglio di stile. Possono avere qualsiasi valore che sia un valore CSS (ad esempio colori, numeri [unità incluse] o testo.) E possono essere referenziati ovunque nel nostro foglio di stile.
Le variabili di Sass sono precedute con il $ simbolo e il valore e il nome sono separati da un punto e virgola, proprio come una proprietà CSS.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: punteggiato; body color: $ mainColor; border: 1px $ borderStyle $ mainColor; larghezza massima: $ siteWidth;
Le variabili MENO sono esattamente le stesse delle variabili di Sass, ad eccezione del fatto che i nomi delle variabili sono preceduti dal simbolo @ simbolo.
@mainColor: # 0982c1; @ siteWidth: 1024px; @borderStyle: punteggiato; body color: @mainColor; border: 1px @borderStyle @mainColor; larghezza massima: @siteWidth;
Le variabili di stilo non richiedono nulla da anteporre a loro, sebbene permetta il $ simbolo. Come sempre, il punto e virgola finale non è richiesto, ma un segno di uguale tra il valore e la variabile è. Una cosa da notare è che Stylus (0.22.4) viene compilato se si antepone il @ simbolo su un nome di variabile, ma non applicherà il valore quando riferito. In altre parole, non farlo.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = colore del corpo tratteggiato mainColor border 1px $ borderStyle mainColor max-width siteWidth
Ciascuno dei suddetti file verrà compilato allo stesso CSS. Puoi usare la tua immaginazione per vedere come possono essere utili le variabili. Non avremo più bisogno di cambiare un colore e dobbiamo ridigitarlo venti volte, o vogliamo cambiare la larghezza del nostro sito e dobbiamo scavare intorno per trovarlo. Ecco il CSS dopo la compilazione:
body color: # 0982c1; border: 1px punteggiato # 0982c1; larghezza massima: 1024 px;
Se abbiamo bisogno di fare riferimento a più elementi con lo stesso genitore nel nostro CSS, può essere noioso continuare a scrivere il genitore più e più volte.
sezione margine: 10px; section nav height: 25px; section nav a color: # 0982C1; sezione nav a: hover text-decoration: underline;
Invece, usando un preprocessore, possiamo scrivere i selettori di bambini all'interno delle parentesi parent. Anche il & il simbolo fa riferimento al selettore genitore.
Tutti e tre i preprocessori hanno la stessa sintassi per i selettori di nesting.
sezione margine: 10px; nav height: 25px; a color: # 0982C1; &: hover text-decoration: underline;
Questo è il CSS compilato dal codice sopra. È esattamente lo stesso di quando abbiamo iniziato: quanto è conveniente!
sezione margine: 10px; section nav height: 25px; sezione nav a color: # 0982C1; sezione nav a: hover text-decoration: underline;
Le mixine sono funzioni che consentono il riutilizzo delle proprietà in tutto il nostro foglio di stile. Piuttosto che dover passare attraverso il nostro foglio di stile e modificare una proprietà più volte, ora possiamo semplicemente cambiarla all'interno del nostro mixin. Questo può essere davvero utile per lo styling specifico di elementi e prefissi del venditore. Quando vengono chiamati i mixin all'interno di un selettore CSS, gli argomenti di mixin vengono riconosciuti e gli stili all'interno del mixin vengono applicati al selettore.
/ * Errore di mixin di Sass con l'argomento (opzionale) $ borderWidth che assume come valore predefinito 2px se non specificato * / @mixin error ($ borderWidth: 2px) border: $ borderWidth solid # F00; colore: # F00; .generic-error padding: 20px; margine: 4px; @include error (); / * Applica gli stili da mixin error * / .login-error left: 12px; posizione: assoluta; sopra: 20px; @include error (5px); / * Applica gli stili dall'errore di mixin con l'argomento $ borderWidth uguale a 5px * /
/ * MENO errore di mixin con l'argomento (facoltativo) @borderWidth che assume come valore predefinito 2px se non specificato * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; colore: # F00; .generic-error padding: 20px; margine: 4px; .errore(); / * Applica gli stili da mixin error * / .login-error left: 12px; posizione: assoluta; sopra: 20px; .error (5px); / * Applica gli stili dall'errore di mixin con argomento @borderWidth uguale a 5px * /
/ * Errore di mixaggio dello stilo con l'argomento (opzionale) borderWidth che assume come valore predefinito 2px se non specificato * / error (borderWidth = 2px) border: borderWidth solid # F00; colore: # F00; .generic-error padding: 20px; margine: 4px; errore(); / * Applica gli stili da mixin error * / .login-error left: 12px; posizione: assoluta; sopra: 20px; errore (5px); / * Applica gli stili da errore di mixin con argomento borderWidth uguale a 5px * /
Tutti i preprocessori compilano lo stesso codice qui sotto:
.generic-error padding: 20px; margine: 4px; border: 2px solid # f00; colore: # f00; .login-error left: 12px; posizione: assoluta; sopra: 20px; border: 5px solid # f00; colore: # f00;
Quando scriviamo CSS alla vecchia maniera, potremmo usare il seguente codice per applicare gli stessi stili a più elementi contemporaneamente:
p, ul, ol / * stili qui * /
Funziona benissimo, ma se abbiamo bisogno di personalizzare ulteriormente gli elementi singolarmente, è necessario creare un altro selettore per ciascuno e può rapidamente diventare più difficile e difficile da mantenere. Per contrastare questo, si può usare l'ereditarietà. L'ereditarietà è la capacità di altri selettori CSS di ereditare le proprietà di un altro selettore.
.block margin: 10px 5px; imbottitura: 2px; p @extend .block; / * Eredita gli stili da '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Eredita gli stili da '.block' * / color: # 333; text-transform: maiuscolo;
.block, p, ul, ol margin: 10px 5px; imbottitura: 2px; p border: 1px solid #EEE; ul, ol color: # 333; text-transform: maiuscolo;
LESS non supporta veramente gli stili ereditari come Sass e Stylus. Invece di aggiungere più selettori a un insieme di proprietà, tratta l'ereditarietà come un mixin senza argomenti e importa gli stili nei propri selettori. Lo svantaggio di questo è che le proprietà vengono ripetute nel tuo foglio di stile compilato. Ecco come lo configureresti:
.block margin: 10px 5px; imbottitura: 2px; p .block; / * Eredita gli stili da '.block' * / border: 1px solid #EEE; ul, ol .block; / * Eredita gli stili da '.block' * / color: # 333; text-transform: maiuscolo;
.block margin: 10px 5px; imbottitura: 2px; p margin: 10px 5px; imbottitura: 2px; border: 1px solid #EEE; ul, ol margin: 10px 5px; imbottitura: 2px; colore: # 333; text-transform: maiuscolo;
Come puoi vedere, gli stili da .bloccare sono stati inseriti nei selettori a cui volevamo assegnare l'ereditarietà. È importante notare che la priorità può diventare un problema qui, quindi sii cauto.
Nella comunità CSS, l'importazione di CSS è disapprovata perché richiede più richieste HTTP. L'importazione con un preprocessore funziona diversamente, tuttavia. Se si importa un file da uno dei tre preprocessori, sarà letteralmente includere l'importazione durante la compilazione, creando un solo file. Tieni presente però che importare regolarmente .css i file vengono compilati con il valore predefinito @import "file.css"; codice. Inoltre, mixin e variabili possono essere importati e utilizzati nel tuo foglio di stile principale. L'importazione rende molto utile la creazione di file separati per l'organizzazione.
/ * file. tipo * / body background: #EEE;
@import "reset.css"; @import "file. tipo"; p background: # 0982C1;
@import "reset.css"; body background: #EEE; p background: # 0982C1;
Le funzioni di colore sono incorporate in funzioni che trasformeranno un colore durante la compilazione. Questo può essere estremamente utile per creare sfumature, colori hover più scuri e molto altro.
schiarire ($ colore, 10%); / * restituisce un colore più leggero del 10% rispetto a $ color * / darken ($ color, 10%); / * restituisce un colore più scuro del 10% rispetto a $ color * / saturare ($ color, 10%); / * restituisce un colore il 10% più saturo di $ colore * / desaturazione ($ colore, 10%); / * restituisce un colore inferiore del 10% rispetto a $ color * / grayscale ($ color); / * restituisce la scala di grigi di $ colore * / complemento ($ colore); / * restituisce colore complementare di $ color * / invert ($ color); / * restituisce il colore invertito di $ color * / mix ($ color1, $ color2, 50%); / * mix $ color1 con $ color2 con un peso del 50% * /
Questa è solo una breve lista delle funzioni di colore disponibili in Sass, una lista completa delle funzioni di colore Sass disponibili può essere trovata leggendo la documentazione di Sass.
Le funzioni di colore possono essere utilizzate ovunque che un colore sia valido CSS. Ecco un esempio:
$ color: # 0982C1; h1 background: $ color; border: 3px solid darken ($ color, 50%);
schiarire (@colore, 10%); / * restituisce un colore più leggero del 10% rispetto a @color * / darken (@color, 10%); / * restituisce un colore più scuro del 10% rispetto a @color * / saturazione (@colore, 10%); / * restituisce un colore più saturo del 10% rispetto a @color * / desaturazione (@color, 10%); / * restituisce un colore inferiore del 10% rispetto a @color * / spin (@color, 10); / * restituisce un colore con una sfumatura maggiore di 10 gradi rispetto a @color * / spin (@color, -10); / * restituisce un colore con una tonalità più piccola di 10 gradi rispetto a @color * / mix (@ color1, @ color2); / * restituisce un mix di @ color1 e @ color2 * /
Un elenco di tutte le funzioni LESS può essere trovato leggendo la documentazione LESS.
Ecco un esempio di come utilizzare una funzione di colore in LESS:
@color: # 0982C1; h1 background: @color; border: 3px solid darken (@color, 50%);
schiarire (colore, 10%); / * restituisce un colore più leggero del 10% rispetto a "colore" * / scurisci (colore, 10%); / * restituisce un colore più scuro del 10% rispetto a "colore" * / saturo (colore, 10%); / * restituisce un colore il 10% più saturo di 'colore' * / desaturazione (colore, 10%); / * restituisce un colore inferiore del 10% rispetto a "color" * /
Una lista completa di tutte le funzioni del colore Stylus può essere trovata leggendo la Documentazione Stylus.
Ecco un esempio delle funzioni del colore di Stylus:
color = # 0982C1 h1 bordo di colore di sfondo 3px solido scurire (colore, 50%)
Fare matematica in CSS è abbastanza utile e ora completamente possibile. È semplice e questo è come farlo:
body margin: (14px / 2); top: 50px + 100px; a destra: 100 px - 50 px; a sinistra: 10 * 10;
Abbiamo coperto molte delle caratteristiche e delle novità che i preprocessori possono fare, ma non abbiamo trattato nulla di pratico o pratico. Ecco una breve lista di applicazioni del mondo reale in cui l'uso di un preprocessore è un salvataggi.
Questo è uno dei motivi per usare un preprocessore e per una buona ragione: risparmia tempo e lacrime. Creare un mixin per gestire i prefissi dei fornitori è facile e consente di risparmiare molte ripetizioni e modifiche dolorose. Ecco come farlo:
@mixin border-radius ($ values) -webkit-border-radius: $ valori; -moz-border-radius: $ values; border-radius: $ values; div @include border-radius (10px);
.border-radius (@values) -webkit-border-radius: @values; -moz-border-radius: @values; border-radius: @values; div .border-radius (10px);
border-radius (valori) -webkit-border-radius: valori; -moz-border-radius: valori; border-radius: valori; div border-radius (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Fake 3D testo utilizzando più text-shadows è un'idea intelligente. L'unico problema è che cambiare il colore dopo che il fatto è difficile ed ingombrante. Usando i mix e le funzioni di colore, possiamo creare testo 3D e cambiare il colore al volo!
@mixin text3d ($ color) color: $ color; text-shadow: 1px 1px 0px scurisci ($ color, 5%), 2px 2px 0px scurisci ($ color, 10%), 3px 3px 0px scurisci ($ colore, 15%), 4px 4px 0px scurisci ($ colore, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @include text3d (# 0982c1);
.text3d (@color) color: @color; text-shadow: 1px 1px 0px scurisci (@color, 5%), 2px 2px 0px scurisci (@colore, 10%), 3px 3px 0px scurisci (@colore, 15%), 4px 4px 0px scurisci (@colore, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
text3d (colore) colore: colore testo-ombra: 1px 1px 0px scurire (colore, 5%), 2px 2px 0px scurire (colore, 10%), 3px 3px 0px scurire (colore, 15%), 4px 4px 0px scurire (colore , 20%), 4px 4px 2px # 000 dimensione carattere: 32pt text3d (# 0982c1)
Ho scelto di scrivere lo stilo text-shadows su una riga perché ho omesso le parentesi graffe.
span font-size: 32pt; colore: # 0982c1; text-shadow: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
L'uso delle operazioni sui numeri e delle variabili per le colonne è un'idea che mi è venuta in mente quando stavo giocando con i preprocessori CSS. Dichiarando una larghezza desiderata in una variabile, possiamo facilmente cambiarla lungo la strada senza alcun calcolo mentale. Ecco come è fatto:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; body margin: 0 auto; larghezza: $ siteWidth; .content float: left; width: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; margin-left: $ gutterWidth; larghezza: $ sidebarWidth;
@ siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; body margin: 0 auto; width: @siteWidth; .content float: left; width: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; margin-left: @gutterWidth; larghezza: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; body margin: 0 auto; larghezza: siteWidth; .content float: left; width: siteWidth - (sidebarWidth + gutterWidth); .sidebar float: left; margin-left: gutterWidth; larghezza: sidebarWidth;
body margin: 0 auto; larghezza: 1024 px; .content float: left; larghezza: 704 px; .sidebar float: left; margin-left: 20px; larghezza: 300 px;
Ci sono alcune stranezze nell'usare un preprocessore CSS. Ho intenzione di esaminare alcuni di quelli divertenti, ma se sei davvero interessato a trovarli tutti ti consiglio di setacciare la documentazione o, meglio ancora, di iniziare a utilizzare un preprocessore nella tua codifica quotidiana.
Se hai scritto CSS per un periodo di tempo accettabile, sono sicuro che hai raggiunto un punto in cui hai avuto un errore da qualche parte e semplicemente non riuscivi a trovarlo. Se sei come me, probabilmente trascorri il pomeriggio tirando fuori i capelli e commentando varie cose per scovare l'errore.
I preprocessori CSS riportano errori. È solo così semplice. Se c'è qualcosa di sbagliato nel tuo codice, ti dice dove e se sei fortunato: perché. Puoi controllare questo post del blog se sei interessato a vedere come vengono riportati gli errori nei diversi preprocessori.
Quando si compila con un preprocessore CSS, qualsiasi commento di doppia barra viene rimosso (ad es. //commento) e qualsiasi commento di asterisco barra rimane (ad es. / * commento * /). Detto questo, usa la doppia barra per i commenti che desideri sul lato non compilato e l'asterisco della barra per i commenti che desideri siano visibili dopo la compilazione.
Solo una nota: se si compila minificato, tutti i commenti vengono rimossi.
Ogni preprocessore CSS che abbiamo trattato (Sass, LESS e Stylus) ha il suo modo unico di svolgere lo stesso compito, offrendo agli sviluppatori la possibilità di utilizzare funzioni utili e non supportate mantenendo la compatibilità del browser e la pulizia del codice.
Sebbene non sia un requisito per lo sviluppo, i preprocessori possono risparmiare molto tempo e avere alcune funzioni molto utili.
Vi incoraggio tutti a provare il maggior numero di preprocessori possibile in modo da poter scegliere in modo efficace un preferito e sapere perché è favorito rispetto ai numerosi altri. Se non hai ancora provato a utilizzare un preprocessore per scrivere il tuo CSS, ti consiglio vivamente di provarlo.
Hai una funzione di preprocessore CSS preferita che non ho menzionato? C'è qualcosa che si può fare che un altro non può? Fateci sapere nei commenti qui sotto!
Un ringraziamento speciale a Karissa Smith, una mia amica di grande talento che ha creato la miniatura di anteprima per questo articolo.
Accentsconagua