Share
Nel tutorial precedente abbiamo esaminato come utilizzare l'eccellente pacchetto di pre-elaborazione "PreCSS". In questo tutorial ci avvicineremo alla preelaborazione basata su PostCSS in un modo diverso; l'installazione di una selezione di plug-in scelti a mano per personalizzare il nostro preprocessore da zero.
Ti porterò attraverso la configurazione di ciò che io personalmente trovare di essere un ottimo mix di plug-in di estensione del linguaggio. Tuttavia, quando si tratta del rollover del proprio preprocessore, si può scegliere di utilizzare solo alcuni dei plug-in che trattiamo qui, oppure si potrebbe scegliere di non utilizzare affatto, invece di andare con altre opzioni.
Questa è la bellezza di questo processo; puoi avere la configurazione del preprocessore, a tua scelta. Lo scopo di questo tutorial è quello di mettere le mani sull'esperienza di mettere insieme un preprocessore PostCSS e di addentrarti sulle funzionalità dei plugin attualmente disponibili in modo da poter decidere autonomamente quale utilizzare.
Cominciamo!
La prima cosa che devi fare è impostare il tuo progetto in modo che utilizzi Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
rispettivamente.
Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota.
Quindi, con un terminale o un prompt dei comandi puntato sulla cartella, eseguire il comando installazione di npm.
Questo tutorial assumerà che tu abbia seguito le voci precedenti della serie e ora conosci bene come installare un plug-in nel tuo progetto e caricarlo tramite il tuo Gulpfile o Gruntfile.
Importante! Mentre procediamo, assicurati di caricare i plugin nel tuo Gulpfile / Gruntfile nell'ordine che vedi in questo tutorial; L'ordine di caricamento è importante in PostCSS per far funzionare tutto senza intoppi.
Il primo posto che inizieremo con la creazione del nostro preprocessore personalizzato è rappresentato dalle importazioni. Hai già visto l'inlining PostCSS @importare fogli di stile nelle esercitazioni precedenti Per Minificazione e Ottimizzazione e Preelaborazione con PreCSS. Il modo in cui le importazioni verranno utilizzate in questo preprocessore non è diverso.
Abbiamo appena accennato al fatto che l'ordine di caricamento è importante in PostCSS, e qui troviamo il primo esempio di questo. Vogliamo garantire tutto @importare i file sono in primo piano, in modo tale da avere tutto il codice del nostro progetto in un unico punto per far funzionare il resto dei nostri plugin.
Ad esempio, potremmo memorizzare tutte le nostre variabili in un file parziale e usarle @importare per portare questo parziale nel nostro foglio di stile principale. Se non abbiamo eseguito il plugin che è in linea @importare prima i file, le nostre variabili non verrebbero importate e quindi non sarebbero disponibili per il resto della nostra elaborazione con cui lavorare.
Poiché inizieremo a importare i partial, vogliamo apportare qualche modifica al nostro Gulpfile prima di aggiungere la nostra funzionalità di importazione.
Nota: se usi Grunt, non avrai bisogno di apportare modifiche in questa fase.
In questo momento stiamo facendo compilare qualsiasi file ".css" trovato nella cartella "src", ma non vogliamo compilare accidentalmente file parziali. Importeremo tutto nel nostro file "style.css", quindi è l'unico che deve essere compilato.
Trova questa linea:
Accentsconagua
return gulp.src ('./ src / *. css')... e cambialo in:
return gulp.src ('./ src / style.css')Questo è lo stesso plug-in che abbiamo usato nel tutorial "For Minification and Optimization" e che è anche usato in PreCSS, quindi a questo punto lo conoscerai un po '.
Installa il plugin nel tuo progetto, quindi nella cartella "src" crea un file chiamato "_vars.css" e aggiungi un codice di test di base. Nota che non abbiamo ancora aggiunto la funzionalità delle variabili, quindi solo alcuni CSS semplici, ad esempio:
.test background: nero;
Ora importa il tuo nuovo file di variabili nel tuo file "src / style.css" principale aggiungendo questo codice nella prima riga:
@import "_vars";
Compila il tuo codice, quindi controlla il tuo file "dest / style.css" e dovresti vederlo ora contiene il codice dal tuo file "_vars.css".
Nota: questo plugin dovere essere eseguiti prima dei plugin postcss-nested e postcss-simple-vars, entrambi i quali verranno utilizzati.
Vai avanti e installa postcss-mixin, quindi aggiungi il seguente codice al tuo file "src / style.css":
@ define-mixin icon $ network, $ color .button. $ (network) background-image: url ('img / $ (network) .png'); colore di sfondo: $ colore; @mixin icon twitter, blue;Dopo la compilazione il tuo "dest / style.css" dovrebbe avere il seguente codice compilato aggiunto ad esso:
.button.twitter background-image: url ('img / twitter.png'); colore di sfondo: blu; Il plugin postcss-mixins che stiamo utilizzando qui è lo stesso utilizzato in PreCSS. Abbiamo esaminato come utilizzarlo nel tutorial su PreCSS, quindi per i dettagli completi sulla sua sintassi, consulta la sezione "Mixins" del tutorial precedente.
Se preferisci usare la sintassi di Sass durante la creazione di mix, dai un'occhiata al plugin postcss-sassy-mixins di Andy Jansson, che funziona allo stesso modo dei postcss-mixin ma con la sintassi @mixin definire un mixin, e @includere usarne uno.
Nota: il plugin postcss-for è un altro dovere essere eseguito prima di postcss-nested e postcss-simple-vars.
Installa il plugin postcss-for, quindi verifica che funzioni come previsto aggiungendo questo codice al tuo file "src / style.css":
@for $ i da 1 a 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Dovrebbe essere compilato per darti:
p: nth-of-type (1) margin-left: calc (100% / 1); p: nth-of-type (2) margin-left: calc (100% / 2); p: nth-of-type (3) margin-left: calc (100% / 3);
Ancora una volta, il plugin che stiamo usando per aggiungere @per i loop sono gli stessi utilizzati in PreCSS, quindi per ulteriori informazioni sulla sua sintassi, controlla la sezione "Loops" nel tutorial precedente.
Il plugin postcss-for deve essere eseguito prima di postcss-simple-vars, il che significa che non c'è modo di usare le variabili per impostare l'intervallo che vuoi @per loop per scorrere attraverso.
Se questo è un problema, puoi invece usare questo fork del postcss-per plugin che dovrebbe invece essere caricato dopo i plugin postcss-simple-vars.
Poiché viene eseguito dopo aver valutato le variabili, sei libero di utilizzare le variabili per impostare l'intervallo che desideri @per loop per scorrere attraverso, in questo modo:
@from: 1; @count: 3; @for $ i da @from a @count p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Stiamo per aggiungere due tipi di variabili al nostro preprocessore, che possono essere molto utili. Il primo tipo usa la sintassi Sass-like, e il secondo usa la sintassi delle proprietà personalizzate CSS, altrimenti noto come variabili CSS.
Installa questi due plug-in, poi li testeremo uno alla volta.
Innanzitutto, testeremo la sintassi simile a Sass di postcss-simple-vars. Apri il file "_vars.css" che hai creato in precedenza, elimina il suo contenuto e aggiungi il seguente codice:
$ default_padding: 1rem;
Aggiungi quanto segue al tuo file "src / style.css" e ricompila:
.post padding: $ default_padding;
Dovrebbe essere compilato per darti:
.post padding: 1rem;
Ora testeremo le proprietà personalizzate CSS come la sintassi di postcss-css-variables. Aggiungi il seguente codice al tuo file "src / style.css":
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (larghezza massima: 75rem) h1 --h1_font_size: 4vw;
Dovrebbe essere compilato in:
h1 font-size: 3rem; @media (larghezza massima: 75rem) h1 font-size: 4vw;
Si noti che quando si usano le variabili CSS, dovevamo solo cambiare il valore di --h1_font_size variabile all'interno della query multimediale e genera automaticamente l'associato dimensione del font proprietà. Questa è una funzionalità particolarmente utile.
Prima di andare avanti menzionerò brevemente ancora una volta, che l'approccio adottato in questo tutorial non è l'approccio a te avere prendere. Se vuoi usare un tipo di variabile e non l'altro, va benissimo.
Dal mio punto di vista, la ragione per cui mi piace usare entrambi i tipi di variabili è che li uso in due modi diversi. Generalmente utilizzo la sintassi delle proprietà personalizzate CSS nel mio foglio di stile principale, mentre utilizzo le variabili Sass nei miei file parziali.
Questo mi consente di impostare le proprietà personalizzate CSS per il tipo di variabili che potrei effettivamente utilizzare in un progetto live se / quando sono ben supportate tra i browser. Come hai visto nell'esempio sopra, hanno anche certe funzionalità che le variabili simili a Sass non hanno.
Nel frattempo, posso usare variabili simili a Sass per cose che non appartengono a un foglio di stile live, specialmente quelle che esistono puramente per essere processate attraverso cose come ogni loop, condizionali e altre trasformazioni.
In alternativa all'utilizzo di postcss-simple-vars, ti consigliamo di utilizzare postcss-advanced-variables, il plug-in utilizzato come parte del pacchetto PreCSS.
Questa è anche un'opzione eccellente, con la differenza principale che gestisce condizionali, cicli e variabili tutti nello stesso plugin. Per me, la ragione per cui attualmente scelgo postcss-simple-vars è che preferisco avere condizionali provenienti da un plugin separato; postcss-conditionals che copriremo a breve.
Invece di usare postcss-css-variables, potresti preferire le proprietà postcss-custom.
La differenza essenziale tra i due è postcss-custom-properties conforme rigorosamente alle specifiche W3C per le proprietà personalizzate in modo da poter essere sicuri che si stia scrivendo solo CSS futuri corretti. D'altro canto, postcss-css-variables offre funzionalità extra, ma nel fare ciò non pretende di avere una completa parità con le specifiche.
Personalmente scelgo le variabili postcss-css perché lo sto usando nel contesto della pre-elaborazione, dove comunque scrivo un sacco di codice non specifico. Come tale preferirei avere la funzionalità aggiunta oltre il 100% di conformità alle specifiche.
Tuttavia, se stai utilizzando variabili nel contesto della scrittura di futuri CSS, potresti trovare le proprietà postcss-personalizzate che sono più adatte a te.
Installa il postcss-ogni plugin quindi aggiungi questo codice variabile al tuo file "_vars.css":
$ social: twitter, facebook, youtube;
Questo codice definisce un elenco, memorizzato in $ sociali variabile.
Ora creeremo un @ogni loop per scorrere i valori memorizzati nel nostro $ sociali variabile. Aggiungi questo codice al tuo file "src / style.css":
@each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Nostro @ogni il ciclo è ora pronto, ma prima che possiamo compilarlo dobbiamo fare una piccola modifica alle opzioni di postcss-simple-vars.
Noterai che nel codice qui sopra stiamo usando $ icona per rappresentare il valore corrente che stiamo iterando. Alcune difficoltà possono derivare da ciò perché il plugin postcss-simple-vars cerca il $ firmare per identificare le variabili.
Questo significa che vedrà $ icona, pensa che sia una variabile, prova ad elaborarla, poi vedi che non ha un valore. Questo lo renderà impossibile compilare e registrare un errore nella console che ha scoperto una variabile non definita.
Per risolvere questo, vogliamo aggiungere l'opzione silenzioso: vero alle nostre opzioni per il plugin. Ciò significa che se scopre una variabile indefinita non smetterà di compilare per registrare un errore, ma andrà avanti. Quindi non sarà disturbato dalla presenza $ icona nel nostro @ogni loop e saremo in grado di compilare con successo.
Nell'array dei processori del tuo Gulpfile o Gruntfile, imposta l'opzione:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / require ('postcss-simple-vars') (silent: true)Ora compila il tuo CSS e dovresti ottenere:
.icona-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Come accennato in precedenza, postcss-advanced-variables è un'altra eccellente opzione di plugin che gestisce variabili, loop e condizionali tutto in uno.
Ho già detto che questo plugin è la mia preferenza per la gestione dei condizionali. Questo perché ho scoperto che è in grado di gestire controlli condizionali più complessi. Include il supporto per @else if sintassi, il che significa che puoi testare più condizioni in un singolo pezzo di codice.
Dopo aver installato il plugin postcss-conditionals, testalo aggiungendo questo codice al tuo file "src / style.css":
$ column_count: 3; .column @if $ column_count == 3 width: 33%; fluttuare: a sinistra; @else if $ column_count == 2 width: 50%; fluttuare: a sinistra; @else width: 100%;
Questo codice controllerà il valore che abbiamo impostato nella variabile @column_count e produrrà valori di larghezza e float diversi a seconda di ciò che trova. Funziona allo stesso modo del codice che abbiamo usato nel precedente tutorial di pre-elaborazione, ma ora che abbiamo la possibilità di usarlo @else if linee siamo stati in grado di aumentare il numero di condizioni che stiamo testando da due a tre.
Dopo aver ricompilato questo dovrebbe darti:
.colonna larghezza: 33%; float: sinistra
Prova a cambiare $ COLUMN_COUNT a 2 o 1 e compilare di nuovo per vedere come cambia l'output CSS.
Possiamo anche utilizzare questi tipi di condizionali bene all'interno dei mixin, per i quali abbiamo aggiunto il supporto in precedenza. Ad esempio, possiamo creare un mixin per generare il codice di layout della colonna in questo modo:
@ define-mixin columns $ count @if $ count == 3 width: 33%; fluttuare: a sinistra; @else if $ count == 2 width: 50%; fluttuare: a sinistra; @else width: 100%; .another_column @mixin columns 2;
Questo ti darà l'output:
.another_column width: 50%; fluttuare: a sinistra;
Come accennato in precedenza, postcss-advanced-variables è un'altra eccellente opzione di plugin che gestisce variabili, loop e condizionali tutto in uno.
In un precedente tutorial abbiamo usato postcss-calc, tramite cssnano, per aiutare a creare istanze di Calc () usare più efficiente. Nel contesto della pre-elaborazione, tuttavia, può essere molto utile ovunque potremmo voler usare la matematica nei nostri fogli di stile.
Vai avanti e installa postcss-calc, quindi lo testeremo facendo in modo che il mix di generazione di colonne sia stato aggiunto più efficiente.
In questo momento stiamo usando condizionali per verificare se il mixin è count $ argomento è impostato su entrambi 1, 2 o 3 quindi emettendo una corrispondente larghezza precalcolata. Invece, useremo Calc () per generare automaticamente la larghezza giusta per il nostro codice colonna, indipendentemente dal numero che viene passato attraverso il mixin.
Aggiungi al tuo file "src / style.css":
@ define-mixin columns_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin columns_calc 2;
Invece di codificare con precisione le larghezze percentuali di cui avremmo bisogno per determinati numeri di colonne, ora lo calcoliamo al volo.
Il plugin postcss-calc verrà convertito width: calc (100% / $ count); in un importo statico in base al valore passato quando chiamiamo il mixin, in questo caso 2.
Ricompila il codice e dovresti vedere questo output:
.column_calculated width: 50%; fluttuare: a sinistra;
Nota: Ovunque postcss-calc può essere risolto Calc () ad un valore statico lo emetterà nel tuo codice. Se non può, non cambierà nulla, quindi puoi ancora usarlo Calc () per i valori che devono essere gestiti dal browser in fase di esecuzione.
Per la nidificazione utilizziamo lo stesso plug-in utilizzato nel pacchetto PreCSS, quindi puoi fare riferimento al tutorial precedente per informazioni complete sulla sintassi.
Installa postcss-nested quindi verifica che tutto funzioni correttamente compilando questo codice:
.menu larghezza: 100%; a decorazione del testo: nessuna;
Il tuo CSS risultante dovrebbe essere:
.menu larghezza: 100%; .menu a text-decoration: none;
Per estendere utilizzeremo il plugin postcss-sass-extend. Ci fornirà una sintassi diversa da quella di cui abbiamo parlato nel nostro precedente tutorial su come lavorare con PreCSS. Invece di estendere viene definito con @ define-extend nome_estensione ... sono definiti con % extend_name ....
Sono ancora usati con la stessa sintassi di @extend% extend_name;.
Nota che il plugin postcss-sass-extend viene fornito con PreCSS, tuttavia suppongo che non venga caricato di default come quando ho tentato di utilizzare la sintassi richiesta che non è stata compilata.
Dopo aver installato postcss-sass-extend nel tuo progetto, testalo con il seguente codice:
% rounded_button border-radius: 0.5rem; imbottitura: 1em; border-width: 0.0625rem; border-style: solido; .blue_button @extend% rounded_button; border-color: # 2F74D1; background-color: # 3B8EFF; .red_button @extend% rounded_button; border-color: # C41A1E; background-color: # FF2025;
Dovrebbe essere compilato in:
.blue_button, .red_button border-radius: 0.5rem; imbottitura: 1em; border-width: 0.0625rem; border-style: solido; .blue_button border-color: # 2F74D1; background-color: # 3B8EFF; .red_button border-color: # C41A1E; background-color: # FF2025;
Finora abbiamo trattato quelle che potrebbero essere considerate le caratteristiche principali comuni alla maggior parte dei preprocessori. Tuttavia, ci sono ancora più plugin disponibili per offrire funzionalità extra; alcune di queste funzionalità si trovano in altri preprocessori e alcune devono essere pubblicate su PostCSS. Vedremo brevemente queste opzioni extra ora.
La possibilità di modificare i colori può essere una delle funzionalità più utili che si trovano nei preprocessori. Esistono in realtà diversi plugin di colori per PostCSS, ma questi sono tre che si trovano particolarmente a loro agio in una configurazione di pre-elaborazione. Consentono varie trasformazioni di colore tra cui schiarire, scurire, saturare, aggiungere valori alfa e altro ancora.
La funzionalità offerta da questo plug-in potrebbe essere paragonata ai mixin senza soluzione di continuità di Stylus, per cui, piuttosto che usare una sintassi simile @mixin, si definiscono blocchi di codice in modo tale che possano essere successivamente utilizzati nel codice allo stesso modo di una proprietà nativa, ad es..
/ * Definire una proprietà * / size: $ size height: $ size; larghezza: $ dimensione; / * Usalo come una proprietà nativa * / .square size: 50px;
Il plugin può anche essere utilizzato per ridefinire le proprietà native in base alle proprie esigenze.
La ricerca di proprietà è una funzionalità che si può trovare in Stylus. Ti permette di cercare il valore di una proprietà all'interno dello stesso stile. Ad esempio, potresti impostare un margine destro per abbinare la sinistra con: margin-left: 20px; margin-right: @ margin-left;
Mentre il nesting regolare viene descritto sopra i selettori di unwraps, il plugin post-nested-props annulla le proprietà nidificate, ad esempio:
/ * Origincal code * / .element border: width: 1px; stile: solido; colore: #ccc; / * Dopo l'elaborazione di * / .element border-width: 1px; border-style: solido; border-color: #ccc;
La corrispondenza offre un altro modo per eseguire i controlli condizionali, questa volta usando la corrispondenza del modello Rust come, qualcosa di simile alle istruzioni switch in JavaScript o PHP. Questo può darti un modo più efficiente per controllare più condizioni rispetto alla scrittura di molti @se altro controlli.
La generazione di sprite CSS, una caratteristica diffusa in Compass, può essere eseguita anche tramite il plugin postcss-sprites. Il plug-in eseguirà la scansione del CSS per le immagini, unirà quelle immagini in un foglio sprite e aggiornerà il codice come richiesto per visualizzare correttamente il nuovo foglio sprite.
Al momento è disponibile un elenco di plug-in di estensione della lingua davvero valido, più di quello che possiamo fornire qui, quindi consulta l'elenco completo all'indirizzo: https://github.com/postcss/postcss#language-extensions
Per molte persone, la capacità di scrivere in una sintassi chiara ed efficiente (in genere sans punto e virgola e parentesi graffe) è uno dei grandi richiami dei preprocessori come Stylus o Sass. La versione 5.0 di PostCSS appena rilasciata ora supporta parser personalizzati che consentiranno il supporto di nuove sintassi. SugarSS deve essere il parser sintattico e le discussioni sono attualmente aperte su come sarà strutturata questa sintassi.
PostCSS è ancora relativamente nuovo e potresti scoprire che c'è qualcosa che vuoi ottenere con il tuo preprocessore personalizzato per il quale non esiste attualmente alcun plug-in. La bellezza di questo ecosistema modulare è la possibilità di risolvere autonomamente il problema creando il proprio plugin. Chiunque può farlo e la barriera di accesso è molto più bassa di quanto dovessi provare ad aggiungere le tue funzionalità a Stylus, Sass o LESS. Impareremo come in un tutorial successivo.
Non è necessario scegliere tra PreCSS e il rollover del proprio preprocessore se si desidera utilizzare PostCSS. Puoi scegliere di rinunciare completamente a qualsiasi pre-elaborazione basata su PostCSS se lo desideri, invece di utilizzarlo parallelamente al tuo preprocessore preferito.
Nel prossimo tutorial impareremo come utilizzare PostCSS in combinazione con Stylus, Sass o LESS. Ci vediamo lì!
