Share
Se sei interessato a utilizzare PostCSS, ma continui ad amare il tuo preprocessore preferito, non preoccuparti. Non è necessario scegliere tra i due: puoi usarli uno accanto all'altro.
Esistono diversi plugin PostCSS che si adattano molto bene ai preprocessori, poiché aggiungono funzionalità al tuo flusso di lavoro che altrimenti sarebbero impossibili, o almeno più difficili, utilizzando solo un preprocessore.
Toccheremo alcuni di questi plugin gratuiti, quindi esamineremo le guide di installazione per mostrarti come utilizzare PostCSS parallelamente a Sass, Stylus o LESS.
Prima di entrare Come puoi utilizzare i preprocessori insieme a PostCSS, ne parleremo un po ' perché tu vorresti. La risposta breve è: per ottenere l'accesso ai plugin PostCSS la cui funzionalità completa i preprocessori. Per mostrarti perché valga la pena, esamineremo una serie di plug-in che funzionano molto bene con i preprocessori.
Nota: potrebbe essere possibile ottenere risultati finali simili utilizzando mixine e funzioni nel normale codice del preprocessore, ma con ciascuno degli esempi sotto il processo viene gestito automaticamente. Scrivi normalmente il tuo CSS e i plugin si occupano di tutto per te, senza funzioni da chiamare, senza mixin da includere o argomenti da passare.
Ci sono stati molti mix di preprocessore scritti per gestire l'inserimento dei prefissi dei fornitori. Ad esempio, potresti aver usato @include box-sizing (border-box); dalla libreria Compass all'output del fornitore con prefisso box-sizing regole.
Il problema di affidarsi ai mixaggi per i prefissi dei fornitori è:
Accentsconagua
box-sizing per modo di lungo ...)Autoprefixer elimina questi problemi gestendo automaticamente il processo del prefisso del venditore. Autoprefixer esegue la scansione del tuo CSS, lo confronta con i dati di CanIUse.com, quindi aggiunge i prefissi richiesti.
Maggiori informazioni su Autoprefixer su: https://github.com/postcss/autoprefixer
Anche la generazione di fogli di stile sia predefiniti che RTL (da destra a sinistra) da una singola sorgente è qualcosa che è stato fatto con i preprocessori, tuttavia in genere richiede l'uso di più mixin e / o variabili interpolanti nel codice in più punti. Ad esempio, piuttosto che scrivere margin-left: 1rem; potresti aver bisogno di scrivere margin - # dir: 1rem; o @include margin-left (1rem);.
Tuttavia, con il plugin rtlcss di Mohammad Younes, non è necessario utilizzare i mixin o l'interpolazione delle variabili, basta scrivere il foglio di stile come faresti normalmente e il plug-in troverà tutte le istanze o "destra" o "sinistra" e le scambierà. Così margin-left: 1rem; diventa automaticamente margine-destra: 1rem; senza che tu debba scrivere alcun codice speciale per farlo accadere.
Maggiori informazioni su rtlcss all'indirizzo: https://github.com/MohammadYounes/rtlcss
Con il plugin postcss-colorblind di Brian Holt puoi generare automaticamente diverse versioni del tuo foglio di stile che ti danno l'esperienza di prima mano di come apparirà il tuo design a una persona con daltonismo. È in grado di simulare otto diversi tipi di daltonismo, aiutandoti a ottenere una solida comprensione di quanto siano accessibili i tuoi schemi di colori.
Questo è un esempio di funzionalità che devi davvero andare a PostCSS per trovare, in quanto sarebbe molto difficile per i preprocessori raggiungere.
Maggiori informazioni su postcss-colorblind su: https://github.com/btholt/postcss-colorblind
Il plugin postcss-svgo di Ben Briggs ti consente di ottimizzare a mani libere il codice SVG in linea. Ad esempio questo:
background: url ('data: image / svg + xml; utf-8,');Può essere ridotto a questo, meno della metà del codice:
background: url ('data: image / svg + xml; utf-8,');Maggiori informazioni su postcss-svgo su: https://github.com/ben-eb/postcss-svgo
Mentre i preprocessor possono eliminare spazi bianchi e commenti, il pacchetto cssnano di Ben Briggs può eseguire tutti i tipi di ottimizzazioni al di sopra e al di là di questi due passaggi. Copriamo cssnano in dettaglio nel tutorial For Minification and Optimization.
Maggiori informazioni su cssnano all'indirizzo: https://github.com/ben-eb/cssnano
Il plugin postcss-font-magician di Jonathan Neal rende l'aggiunta di caratteri personalizzati facile come l'utilizzo di caratteri regolari. Non è necessario utilizzare alcun mix, basta aggiungere un famiglia di font regola come faresti normalmente:
body font-family: "Alice";
... e il plugin si manterrà completo @ Font-face generazione per te:
@ font-face font-family: "Alice"; stile font: normale; font-weight: 400; src: local ("Alice"), local ("Alice-Regular"), url ("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format ("eot") , url ("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") formato ("woff2"), url ("http://fonts.gstatic.com/s/alice/v7 /_H4kMcdhHr0B8RDaQcqpTA.woff ") formato (" woff "), url (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") formato (" truetype ") body font-family: "Alice"; Maggiori informazioni su postcss-font-magician su: https://github.com/jonathantneal/postcss-font-magician
Di seguito sono riportate sei guide di installazione: una guida Gulp e Grunt per ciascun principale preprocessore. Non è necessario leggere tutti e sei, puoi semplicemente saltare direttamente alla guida per il tuo strumento preferito di preprocessore e creazione. Se non sei sicuro di usare Gulp o Grunt, Gulp è sicuramente la scelta più semplice per questo tutorial.
Per qualsiasi guida che segui, dovrai iniziare con un progetto Gulp o Grunt vuoto. 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 verso la cartella esegui il comando installazione di npm.
Dopo aver impostato un progetto vuoto per una delle sezioni seguenti, dovrai anche installare due plugin PostCSS: Autoprefixer e cssnano. Puoi farlo eseguendo il comando:
npm install autoprefixer cssnano --save-dev
Utilizzeremo questi due plug-in per verificare che PostCSS e il preprocessore funzionino insieme come previsto.
La prima regola per utilizzare un preprocessore con PostCSS è che dovresti sempre eseguire il suddetto preprocessore primo. Questo perché non vuoi avere alcuna sintassi specifica del preprocessore nel tuo codice che possa soffocare un plug-in PostCSS e inoltre non vuoi che PostCSS apporti modifiche al tuo codice che potrebbero impedire l'esecuzione di un preprocessore come previsto.
Per ciascuno dei preprocessori che abbiamo configurato, avremo loro eseguire autoprefixer e cssnano dopo che il preprocessore ha terminato la sua compilazione. In ogni caso, dovremo aggiungere un codice di prova per il funzionamento di questi due plug-in.
Per salvare ripetendo lo stesso codice in ogni sezione sottostante, quando vedi un'istruzione che ti dice di aggiungere il tuo codice di prova PostCSS, per favore aggiungi questo al file sorgente del preprocessore su cui stai lavorando:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano rimuoverà questo commento * / display: flex; font-weight: normal; margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margine-destra: 2.5rem; font-weight: normal; imbottitura: 1,75 m; larghezza: calc (50rem - (2 * 1.75rem));
In caso di successo, il codice compilato verrà in ogni caso visualizzato come:
.css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margine: 1rem 2.5rem 2rem 1.5rem; font- peso: 400; padding: 1.75rem; larghezza: 46.5rem
Nota: gli usi di flexbox sono stati autoprefissi e cssnano ha eseguito più ottimizzazioni del codice. Stiamo usando lo stesso codice per testare cssnano come abbiamo fatto nella precedente esercitazione For Minification and Optimization, quindi per favore fai riferimento alla sezione "cssnano" per i dettagli sulle ottimizzazioni che vengono eseguite.
Poiché stai già lavorando con Node.js per eseguire Gulp o Grunt e PostCSS, il modo più semplice per usare Sass al loro fianco è farlo tramite LibSass. Anche questo è considerevolmente più veloce di Ruby Sass. Implementeremo LibSass tramite i moduli gulp-sass o grunt-contrib-sass.
Installa il modulo gulp-sass nel tuo progetto con npm installa gulp-sass --save-dev.
Ora puoi aggiornare il tuo Gulpfile al seguente:
var gulp = require ('gulp'); var postcss = require ('gulp-postcss'); var sass = require ('gulp-sass'); var autoprefixer = require ('autoprefixer'); var cssnano = require ('cssnano'); gulp.task ('css', function () var processors = [autoprefixer, cssnano]; restituisce gulp.src ('./ src / *. scss') .pipe (sass (). on ('errore', sass .logError)) .pipe (postcss (processors)) .pipe (gulp.dest ('./ dest')););Analizziamo ciò che è stato modificato dall'avvio predefinito Gulpfile:
gulp-sass, autoprefixer e cssnano autoprefixer e cssnano variabili al processori schieramentotubo() linea, .tubo (sass () ... , per elaborare il Sass, avendo cura di posizionarlo prima della linea che elabora PostCSSOra possiamo eseguire alcuni test per accertarci che Sass e PostCSS stiano compilando come previsto.
Rinominare il file "src / style.css" esistente in "src / style.scss" e aggiungervi il seguente codice di test:
$ font-stack: Helvetica, sans-serif; $ primary-color: # 333; body font: 100% $ font-stack; colore: $ colore primario;
Correre gulp css e dovresti vedere un nuovo file "style.css" apparire nella tua cartella "dest" con i contenuti:
body font: 100% Helvetica, sans-serif; colore: # 333;
Ora aggiungi il codice di test PostCSS fornito in precedenza in questo tutorial sul tuo file "style.scss".
Esegui il tuo gulp css comando e dovresti vedere il codice corretto apparire nel tuo file "dest / style.css":
body font: 100% Helvetica, sans-serif; colore: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem
Nel tuo nuovo progetto Grunt, installa il modulo grunt-contrib-sass con npm installa grunt-contrib-sass.
Quindi aggiungere un grunt.loadNpmTasks () funzione per esso sotto quello esistente che hai per PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss'); grunt.loadNpmTasks ( 'grunt-contrib-sass');
Ora dovrai configurare una nuova attività per l'elaborazione di Sass. Dopo questa linea:
grunt.initConfig (
... ma prima dell'esistente postcss compito, aggiungi questo codice:
sass: dist: files: 'src / style.css': 'src / style.scss',
Ora registreremo un'attività che eseguirà Sass e PostCSS. Dopo il grunt.loadNpmTasks () funzione appena inserita, aggiungi:
grunt.registerTask ('css', ['sass', 'postcss']);Per verificare la tua configurazione, rinomina il tuo file "src / style.css" esistente in "style.scss". Aggiungi questo codice Sass ad esso:
$ font-stack: Helvetica, sans-serif; $ primary-color: # 333; body font: 100% $ font-stack; colore: $ colore primario;
Esegui il comando grunt css e dovresti vedere un nuovo file creato nella cartella "dest" denominata "style.css" e contenente questo codice:
body font: 100% Helvetica, sans-serif; colore: # 333;
Ora avremo i plugin per Autoprefixer e cssnano in esecuzione. Aggiorna il tuo Gruntfile's processori array al seguente:
processori: [require ('autoprefixer') (), require ('cssnano') ()]Aggiungi il codice di test PostCSS al tuo file "style.scss", esegui il comando grunt css di nuovo e dovresti trovare il file "dest / style.css" ricompilato ora contiene il codice corretto prefissato e ottimizzato.
Stylus e PostCSS funzionano particolarmente bene insieme grazie alla creazione del pacchetto PostStylus di Sean King, che combina l'elaborazione di Stylus e PostCSS. Se sei uno sviluppatore Stylus, puoi semplicemente aggiungere PostStylus al tuo processo di compilazione e avere immediatamente accesso all'utilizzo dei plugin PostCSS come parte del tuo flusso di lavoro.
PostStylus: https://github.com/seaneking/poststylus
Se stai usando Gulpfile premed dal progetto di base, noterai che usa il plugin gulp-postcss. Questo è in realtà solo lì come è necessario per i processi di installazione di Sass e LESS, ma per Stylus non ne abbiamo bisogno perché stiamo usando PostStylus come il nostro compilatore invece.
Puoi rimuoverlo dal tuo progetto con npm uninstall gulp-postcss --save-dev, ed elimina questa linea dal tuo Gulpfile:
var postcss = require ('gulp-postcss');Ora possiamo installare i due plug-in necessari per la compilazione Stylus e PostCSS, eseguendo il comando:
npm installa gulp-stylus poststylus --save-dev
Aggiorna il tuo Gulpfile per diventare:
var gulp = require ('gulp'); var stylus = require ('gulp-stylus'); var poststylus = require ('poststylus'); var autoprefixer = require ('autoprefixer'); var cssnano = require ('cssnano'); gulp.task ('css', function () var processors = [autoprefixer, cssnano]; restituisce gulp.src ('./ src / *. styl') .pipe (stylus (uso: [poststylus (processori)] )) .pipe (gulp.dest ('./ dest')););Ecco cosa abbiamo fatto sopra:
sorso-stilo, poststylus, autoprefixer e cssnano autoprefixer e cssnano variabili al processori schieramento.tubo() linea che legge .tubo (postcss (processori)) .tubo (stilo (... , per impostare i moduli gulp-stylus e poststylus per gestire la nostra compilation Ora siamo pronti per testare la compilazione. Nella cartella "src", rinomina "style.css" in "style.styl" e aggiungi questo codice dello stilo di prova:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 carattere del corpo: 100% $ font-stack color: $ primary-color
Corri il gulp css comando e dovresti vedere un file "style.css" apparire nella tua cartella "dest" con questo contenuto:
body font: 100% Helvetica, sans-serif; colore: # 333;
Aggiungi il codice di test PostCSS fornito in precedenza al file "style.styl", assicurandoti che solo i rientri della scheda siano nel codice incollato, non negli spazi.
Ricompila e verifica di avere l'output appropriato nel tuo file "dest / style.css".
body font: 100% Helvetica, sans-serif; colore: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem
Come nel caso del progetto Gulp per Stylus, non è richiesto il compilatore PostCSS predefinito fornito con il progetto di avvio, essendo lì esclusivamente per i processi di installazione di Sass e LESS. Puoi rimuoverlo dal tuo progetto con npm uninstall grunt-postcss --save-dev.
Ora possiamo installare grunt-contrib-stylus e poststylus con il comando:
npm installa grunt-contrib-stylus poststylus --save-dev
Non useremo più grunt-postcss, quindi individua questa riga:
grunt.loadNpmTasks ( 'grunt-postcss');
E sostituirlo con:
grunt.loadNpmTasks ( 'grunt-contrib-stilo');
Dato che non stiamo usando grunt-postcss, significa che non avremo più bisogno del postcss compito che abbiamo definito all'interno grunt.initConfig (...);. Eliminare quella configurazione di attività e sostituirla con questa nuova stilo compito:
stylus: compile: options: , files: 'dest / style.css': 'src / style.styl'
Ora siamo pronti per testare la compilazione. Nella cartella "src", rinomina "style.css" in "style.styl" e aggiungi questo codice dello stilo di prova:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 carattere del corpo: 100% $ font-stack color: $ primary-color
Esegui il comando stilo grugnito e dovresti vedere un file "style.css" apparire nella tua cartella "dest" con questo contenuto:
body font: 100% Helvetica, sans-serif; colore: # 333
Per aggiungere i nostri plugin PostCSS al processo di compilazione, dobbiamo prima aggiungere questo codice alla parte superiore del nostro Gruntfile, sopra il module.exports ... linea:
var poststylus = function () return require ('poststylus') (['autoprefixer', 'cssnano']);Qui è dove caricherete qualsiasi plugin PostCSS che volete usare, piuttosto che in a processori array come sarai abituato dai nostri altri tutorial.
Quindi trova il opzioni oggetto all'interno dell'attività dello stilo e aggiornarlo come segue:
opzioni: uso: [poststylus],
Questo dice a grunt-contrib-stylus di usare poststylus durante la compilazione e i suoi plugin insieme ad esso.
Aggiungi il "codice di test PostCSS" al tuo file "src / style.styl", esegui stilo grugnito, e dovresti vedere il seguente contenuto scritto nel tuo file "dest / style.css":
body font: 100% Helvetica, sans-serif; colore: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem
Installa il modulo senza gulp nel tuo progetto con npm install gulp-less --save-dev.
Ora puoi aggiornare il tuo Gulpfile al seguente:
var gulp = require ('gulp'); var postcss = require ('gulp-postcss'); var less = require ('gulp-less'); var autoprefixer = require ('autoprefixer'); var cssnano = require ('cssnano'); gulp.task ('css', function () var processors = [autoprefixer, cssnano]; restituisce gulp.src ('./ src / *. less') .pipe (less ()) .pipe (postcss (processori) ) .pipe (gulp.dest ('./ dest')););Analizziamo ciò che è stato modificato dall'avvio predefinito Gulpfile:
gulp-less, autoprefixer e cssnano autoprefixer e cssnano variabili al processori schieramento.tubo (meno ()) per elaborare il MENO, assicurandosi di posizionarlo prima della linea che elabora PostCSSOra possiamo eseguire alcuni test per accertarci che sia LESS che PostCSS stiano compilando come previsto.
Rinominare il file "src / style.css" esistente in "src / style.less" e aggiungervi il seguente codice di test:
@ font-stack: Helvetica, sans-serif; @ primary-color: # 333; body font: 100% @ font-stack; colore: @ colore primario;
Correre gulp css e dovresti vedere un nuovo file "style.css" apparire nella tua cartella "dest" con i contenuti:
body font: 100% Helvetica, sans-serif; colore: # 333
Ora, nel tuo file "style.less" aggiungi il codice di test PostCSS fornito in precedenza in questo tutorial.
Esegui il tuo gulp css comando e dovresti vedere il codice corretto che appare nel tuo file "dest / style.css".
body font: 100% Helvetica, sans-serif; colore: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem
Nel tuo nuovo progetto Grunt, installa il modulo grunt-contrib-less con npm installa grunt-contrib-less, quindi aggiungere un grunt.loadNpmTasks () funzione per esso sotto quello esistente che hai per PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss'); grunt.loadNpmTasks ( 'grunt-contrib-less');
Ora dovrai configurare una nuova attività per l'elaborazione di MENO. Dopo questa linea:
grunt.initConfig (
... ma prima dell'esistente postcss compito, aggiungi questo codice:
less: produzione: file: 'src / style.css': 'src / style.less',
Ora registreremo un'attività, per eseguire LESS e poi PostCSS. Dopo il grunt.loadNpmTasks () funzione appena inserita, aggiungi:
grunt.registerTask ('css', ['less', 'postcss']);Per testare il tuo setup, rinomina il tuo file "src / style.css" "style.less". Aggiungi questo codice LESS ad esso:
@ font-stack: Helvetica, sans-serif; @ primary-color: # 333; body font: 100% @ font-stack; colore: @ colore primario;
Esegui il comando grunt css e dovresti vedere un nuovo file creato nella cartella "dest" denominata "style.css" e contenente questo codice:
body font: 100% Helvetica, sans-serif; colore: # 333333;
Ora aggiungeremo i nostri plugin PostCSS nel flusso di compilazione. Aggiorna il tuo Gruntfile's processori array al seguente:
processori: [require ('autoprefixer') (), require ('cssnano') ()]Aggiungi il codice di test PostCSS al tuo file "style.less", esegui il comando grunt css di nuovo e dovresti trovare il file "dest / style.css" ricompilato ora contiene il codice corretto prefissato e ottimizzato:
body font: 100% Helvetica, sans-serif; colore: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem
In seguito andremo a verificare qualcosa che potresti quasi considerare un diverso tipo di pre-elaborazione, utilizzando PostCSS per generare automaticamente classi CSS compatibili con BEM / SUIT. Questo processo semplifica notevolmente lo sviluppo di BEM / SUIT, oltre a quello più efficiente.
Ci vediamo nel prossimo tutorial!
