Share
Om du är intresserad av att använda PostCSS, men du fortfarande älskar din favorit preprocessor, oroa dig inte. Du behöver inte välja mellan de två. Du kan använda dem rätt bredvid varandra.
Det finns flera PostCSS-plugins som komplimangerar preprocessorer mycket bra, eftersom de lägger till funktionalitet i ditt arbetsflöde som annars skulle vara omöjligt, eller åtminstone svårare att använda endast en förprocessor.
Vi kommer att peka på några av dessa gratis plugins, så går vi igenom installationsguider för att visa hur du använder PostCSS sida vid sida med Sass, Stylus eller LESS.
Innan vi kommer in på vilket sätt Du kan använda preprocessorer tillsammans med PostCSS, vi ska prata lite om Varför du skulle vilja. Det korta svaret är: att få tillgång till PostCSS-plugins vars funktionalitet komplimangerar förprocessorer. För att visa dig varför det är värt att ha det, går vi över en handfull plugins som fungerar riktigt bra med preprocessorer.
Notera: det kan vara möjligt att uppnå liknande slutresultat genom att använda mixins och funktioner i vanlig preprocessorkod, men med varje exempel nedan hanteras processen automatiskt. Du skriver din CSS normalt och pluginerna tar hand om allt för dig, utan några funktioner att ringa, inga mixins att inkludera eller argument att passera.
Det har skett många preprocessor mixin skrivna för att hantera införandet av leverantörs prefix. Du kan till exempel ha använt @ include box-dimensionering (gränsvärde); från kompassbiblioteket till utsänd leverantör prefixed box-dimensionering regler.
Problemet med att förlita sig på mixins för leverantörs prefix är:
Accentsconagua
box-dimensionering för långt till lång ...)Autoprefixer eliminerar dessa problem genom att hantera processen för leverantörsprefixering automatiskt. Autoprefixer skannar din CSS, kontrollerar den mot data från CanIUse.com och lägger sedan till de prefix som krävs.
Läs mer om Autoprefixer på: https://github.com/postcss/autoprefixer
Att skapa både standard och RTL (höger till vänster) stilark från en enda källa är också något som har gjorts med förprocessorer, men det kräver vanligtvis att flera mixins och / eller interpolerande variabler används i din kod på flera ställen. Till exempel, snarare än att skriva marginal-vänster: 1rem; du kanske behöver skriva marginal - # dir: 1rem; eller @include margin-left (1rem);.
Med rtlcss-plugin av Mohammad Younes behöver du emellertid inte använda mixins eller variabel interpolering, du skriver bara ditt stylesheet som du normalt skulle och plugin hittar alla instanser eller "höger" eller "vänster" och byter dem runt. Så marginal-vänster: 1rem; blir automatiskt marginal-höger: 1rem; utan att du behöver skriva någon särskild kod för att få det att hända.
Läs mer om rtlcss på: https://github.com/MohammadYounes/rtlcss
Med Brian Holts postcss-colorblind-plugin kan du automatiskt generera olika versioner av ditt stilark som ger dig en förstahandsupplevelse av hur din design skulle se ut som en person med färgblindhet. Det kan simulera åtta olika typer av färgblindhet, vilket hjälper dig att få en riktigt fast förståelse för hur lättillgängliga dina färgscheman är.
Detta är ett exempel på funktionalitet som du verkligen måste gå till PostCSS för att hitta, eftersom det skulle vara mycket svårt för preprocessorer att uppnå.
Läs mer om postcss-colorblind på: https://github.com/btholt/postcss-colorblind
Benchiggs postcss-svgo-plugin kan ge dig handsfree optimering av inline SVG-kod. Till exempel detta:
bakgrund: url ('data: image / svg + xml; utf-8,');Kokas ner till detta, mindre än hälften av koden:
bakgrund: url ('data: image / svg + xml; utf-8,');Läs mer om postcss-svgo på: https://github.com/ben-eb/postcss-svgo
Medan förprocessorer kan ta bort whitespace och kommentarer kan cssnano-paketet från Ben Briggs utföra alla möjliga optimeringar utöver dessa två steg. Vi täcker cssnano i detalj i handledningen för Minifiering och Optimering.
Läs mer om cssnano på: https://github.com/ben-eb/cssnano
Postcss-font-magiker plugin av Jonathan Neal gör att du lägger till anpassade teckensnitt så enkelt som att använda vanliga typsnitt. Du behöver inte använda några mixins, lägg bara till en typsnittsfamilj regel som du normalt skulle:
kropp font-family: "Alice";
... och plugin kommer att hantera hela @ Font-face generation för dig:
@ font-face font-family: "Alice"; typsnittstyp: normal; font-vikt: 400; src: local ("Alice"), lokal ("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") format ("woff2"), url ("http://fonts.gstatic.com/s/alice/v7 /_H4kMcdhHr0B8RDaQcqpTA.woff ") format (" woff "), url (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") format (" truetype ") kropp font-family: "Alice"; Läs mer om postcss-font-magiker på: https://github.com/jonathantneal/postcss-font-magician
Det finns sex installationsguider nedan: en Gulp and Grunt guide för varje större preprocessor. Det finns ingen anledning att läsa alla sex, du kan bara hoppa direkt till guiden för din föredragna förbehandlare och byggverktyg. Om du inte är säker på att använda Gulp eller Grunt är Gulp definitivt det enklaste valet för denna handledning.
För vilken guide du följer måste du börja med ett tomt Gulp eller Grunt-projekt. Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill installera ditt projekt manuellt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp. Sedan kör kommandot med en terminal eller kommandotolk som pekas på mappen npm installera.
När du har installerat ett tomt projekt för en av nedanstående sektioner måste du också installera två PostCSS-plugins: Autoprefixer och cssnano. Du kan göra det genom att köra kommandot:
npm installera autoprefixer cssnano - save-dev
Vi använder dessa två plugins för att testa att PostCSS och din förprocessor arbetar tillsammans som förväntat.
Den första regeln att använda en preprocessor med PostCSS är att du alltid ska köra nämnda preprocessor först. Detta beror på att du inte vill ha någon preprocessor-specifik syntax i din kod som kan kväva ett PostCSS-plugin, och du vill inte att PostCSS gör ändringar i din kod som kan förhindra att en förprocessor kör som förväntat.
För varje preprocessor vi installerar får vi dem att köra autoprefixer och cssnano efter att förprocessorn har slutfört sammanställningen. I varje fall måste vi lägga till en testkod för dessa två plugins för att fungera.
Om du vill spara upprepad samma kod i varje avsnitt nedan, när du ser en instruktion som säger att du lägger till PostCSS-testkoden, lägg till den här i förprocessorkällfilen du arbetar med:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano tar bort den här kommentaren * / display: flex; typsnitt: normal; margin-top: 1rem; marginalbotten: 2rem; marginal-vänster: 1.5rem; marginal-höger: 2,5rem; typsnitt: normal; vaddering: 1,75rem; bredd: calc (50rem - (2 * 1,75rem));
Om du lyckas kommer din kompilerade kod i varje fall att utgå som:
.css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; font- vikt: 400; padding: 1.75rem; bredd: 46.5rem
Notera: användningarna av flexbox har autoprefixed, och cssnano har utfört flera optimeringar av koden. Vi använder samma kod för att testa cssnano som vi gjorde i den tidigare handledningen för Minifiering och optimering, så hänvisa till avsnittet "cssnano" där för information om vilka optimeringar som ska utföras.
Eftersom du redan arbetar med Node.js för att köra Gulp eller Grunt och PostCSS, är det enklaste sättet att använda Sass tillsammans med dem att göra det via LibSass. Detta är också betydligt snabbare än Ruby Sass. Vi distribuerar LibSass via Gulp-Sass eller Grunt-Contrib-Sass-modulerna.
Installera gulp-sass-modulen i ditt projekt med npm installera gulp-sass -save-dev.
Nu kan du uppdatera din Gulpfile till följande:
var gulp = kräver ("gulp"); var postcss = kräver ("gulp-postcss"); var sass = kräver ("gulp-sass"); var autoprefixer = kräver ("autoprefixer"); var cssnano = kräver ('cssnano'); gulp.task ('css', funktion () var processorer = [autoprefixer, cssnano]; returnera gulp.src ('./ src / * .scss') .pipe (sass (). .logError)). pip (postcss (processorer)). pip (gulp.dest ('./ dest')););Låt oss bryta ner vad vi har ändrat från standardstart Gulpfile:
klunk-sass, autoprefixer och cssnano autoprefixer och cssnano variabler till processorer arrayrör() linje, .rör (sass () ... , att bearbeta Sass, är säker på att placera den före linjen som behandlar PostCSSNu kan vi köra några tester för att se till att både Sass och PostCSS sammanställer som förväntat.
Byt namn på din befintliga "src / style.css" -fil till "src / style.scss" och lägg till följande testkod till den:
$ fontstack: Helvetica, sans-serif; $ primärfärg: # 333; kropp font: 100% $ font-stack; färg: $ primärfärg;
Springa gulp css och du bör se en ny "style.css" -fil visas i din "dest" -mapp med innehållet:
kropp font: 100% Helvetica, sans-serif; färg: # 333;
Nu lägger du till PostCSS-testkoden som anges tidigare i denna handledning till din "style.scss" -fil.
Kör din gulp css kommando och du borde se den korrekta koden visas i filen "dest / style.css":
kropp font: 100% Helvetica, sans-serif; färg: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; typsnitt: 400; vaddering: 1,75rem; bredd: 46,5rem
I ditt nya Grunt-projekt installerar du grunt-contrib-sass-modulen med npm installera grunt-contrib-sass.
Lägg sedan till en grunt.loadNpmTasks () funktion för det under den befintliga du har för PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss'); grunt.loadNpmTasks ( 'grunt-contrib-sass');
Du måste nu konfigurera en ny uppgift för bearbetning av Sass. Efter denna rad:
grunt.initConfig (
... men före det existerande postcss uppgift, lägg till den här koden:
sass: dist: filer: 'src / style.css': 'src / style.scss',
Nu registrerar vi en uppgift som kör Sass och sedan PostCSS. Efter grunt.loadNpmTasks () funktion du bara har satt in, lägg till:
grunt.registerTask ('css', ['sass', 'postcss']);För att testa din inställning, byt namn på din befintliga "src / style.css" -fil till "style.scss". Lägg till den här Sass-koden till den:
$ fontstack: Helvetica, sans-serif; $ primärfärg: # 333; kropp font: 100% $ font-stack; färg: $ primärfärg;
Kör kommandot grunt css och du ska se en ny fil skapad i din "dest" -mapp med namnet "style.css" och innehåller den här koden:
kropp font: 100% Helvetica, sans-serif; färg: # 333;
Vi får nu våra autoprefixer och cssnano plugins som körs. Uppdatera din Gruntfile processorer array till följande:
processorer: [kräver ('autoprefixer') (), kräver ('cssnano') ()]Lägg till PostCSS-testkoden i din "style.scss" -fil, kör kommandot grunt css igen och du bör hitta din omkompilerade "dest / style.css" -filen innehåller nu rätt autoprefixed och optimerad kod.
Stylus och PostCSS fungerar särskilt bra tillsammans tack vare skapandet av PostStylus-paketet från Sean King, som kombinerar behandlingen av både Stylus och PostCSS. Om du är en Stylus-utvecklare kan du bara lägga till PostStylus i din kompileringsprocess och ha direkt tillgång till PostCSS-plugins som en del av ditt arbetsflöde..
PostStylus: https://github.com/seaneking/poststylus
Om du använder den premade Gulpfilen från startprojektet, noterar du att du använder plugin-plug-in-plugin. Det här är faktiskt bara där som det behövs för Sass och LESS installationsprocesser, men för Stylus behöver vi inte det eftersom vi använder PostStylus som vår kompilator istället.
Du kan ta bort det från ditt projekt med npm avinstallera gulp-postcss - save-dev, och radera den här raden från din Gulpfile:
var postcss = kräver ("gulp-postcss");Nu kan vi installera de två plugins som vi behöver för Stylus och PostCSS compilation, genom att köra kommandot:
npm installera gulp-stylus poststylus --save-dev
Uppdatera din Gulpfile för att bli:
var gulp = kräver ("gulp"); Var-stylus = kräver ('gulp-stylus'); var poststylus = kräver (poststylus); var autoprefixer = kräver ("autoprefixer"); var cssnano = kräver ('cssnano'); gulp.task ('css', funktion () var processorer = [autoprefixer, cssnano], returnera gulp.src ('./ src / *. styl') .pipe (stylus (använd: [poststylus )). pip (gulp.dest ('./ dest')););Här är vad vi har gjort ovan:
klunk-stylus, poststylus, autoprefixer och cssnano autoprefixer och cssnano variabler till processorer array.rör() rad som läser .rör (postcss (processorer)) .rör (stylus (... , för att ställa in vulkan-stylus och poststylus-moduler för att hantera vår sammanställning Nu är vi redo att testa kompilering. I din "src" -mapp, byt namn på "style.css" till "style.styl" och lägg till det här testet Stylus-kod:
$ font-stack = Helvetica, sans-serif $ primärfärg = # 333 kaross typsnitt: 100% $ font-stack färg: $ primära färg
Springa det gulp css kommandot och du ska se en "style.css" -fil visas i din "dest" -mapp med det här innehållet:
kropp font: 100% Helvetica, sans-serif; färg: # 333;
Lägg till PostCSS-testkoden som tidigare tillhandahållits i din "style.styl" -fil, så att endast flikindelningar finns i den inmatade koden, inte mellanslag.
Kompilera och kontrollera att du har rätt utgång i filen "dest / style.css".
kropp font: 100% Helvetica, sans-serif; färg: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; typsnitt: 400; vaddering: 1,75rem; bredd: 46,5rem
Precis som med Gulp-projektet för Stylus, är den vanliga PostCSS-kompilatorn som följer med startprojektet inte nödvändigt, det är rent för Sass och LESS installationsprocesser. Du kan ta bort det från ditt projekt med npm avinstallera grunt-postcss - save-dev.
Nu kan vi installera grunt-contrib-stylus och poststylus med kommandot:
npm installera grunt-contrib-stylus poststylus --save-dev
Vi kommer inte längre att använda grunt-postcss, så hitta den här raden:
grunt.loadNpmTasks ( 'grunt-postcss');
Och ersätt det med:
grunt.loadNpmTasks ( 'grunt-contrib-pennan');
Med tanke på att vi inte använder grunt-postcss betyder det att vi inte längre behöver postcss uppgift som vi har definierat inuti grunt.initConfig (...);. Ta bort den uppgiften config och ersätt den med den här nya nål uppgift:
stylus: compile: options: , filer: 'dest / style.css': 'src / style.styl'
Nu är vi redo att testa kompilering. I din "src" -mapp, byt namn på "style.css" till "style.styl" och lägg till det här testet Stylus-kod:
$ font-stack = Helvetica, sans-serif $ primärfärg = # 333 kaross typsnitt: 100% $ font-stack färg: $ primära färg
Kör kommandot grunt stylus och du bör se en "style.css" -fil visas i din "dest" -mapp med det här innehållet:
kropp font: 100% Helvetica, sans-serif; färg: # 333
För att lägga till våra PostCSS-plugins i kompileringsprocessen måste vi först lägga till den här koden längst upp i vår Gruntfile ovanför module.exports ... linje:
var poststylus = funktion () returkrav ('poststylus') (['autoprefixer', 'cssnano']);Här laddar du i alla PostCSS-plugins du vill använda, snarare än i en processorer array som du kommer att vara van vid från våra andra handledning.
Hitta sedan alternativ objektet inuti stylus-uppgiften och uppdatera det till följande:
alternativ: använd: [poststylus],
Detta berättar för grunt-contrib-stylus att använda poststylus under kompilering och dess plugins tillsammans med den.
Lägg till "PostCSS-testkoden" till din "src / style.styl" -fil, kör grunt stylus, och du bör se följande innehåll skrivet i din "dest / style.css" -fil:
kropp font: 100% Helvetica, sans-serif; färg: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; typsnitt: 400; vaddering: 1,75rem; bredd: 46,5rem
Installera den smutsfria modulen i ditt projekt med npm installera gulp-less - save-dev.
Nu kan du uppdatera din Gulpfile till följande:
var gulp = kräver ("gulp"); var postcss = kräver ("gulp-postcss"); var mindre = kräver ("gulp-less"); var autoprefixer = kräver ("autoprefixer"); var cssnano = kräver ('cssnano'); gulp.task ('css', funktion () var processorer = [autoprefixer, cssnano]; returnera gulp.src ('./ src / *. less') .pipe (mindre ()) .pipe (postcss ). pip (gulp.dest ('./ dest')););Låt oss bryta ner vad vi har ändrat från standardstart Gulpfile:
gulp-mindre, autoprefixer och cssnano autoprefixer och cssnano variabler till processorer array.rör (mindre ()) för att bearbeta det mindre, är det säkert att placera det före den linje som behandlar PostCSSNu kan vi köra några tester för att se till att både LESS och PostCSS sammanställer som förväntat.
Byt namn på den befintliga filen "src / style.css" till "src / style.less" och lägg till följande testkod till den:
@ fontstack: Helvetica, sans-serif; @ primärfärg: # 333; kropp font: 100% @ font-stack; färg: @ primärfärg;
Springa gulp css och du bör se en ny "style.css" -fil visas i din "dest" -mapp med innehållet:
kropp font: 100% Helvetica, sans-serif; färg: # 333
Nu lägger du till PostCSS-testkoden som du tidigare angett i den här handledningen till din "style.less" -fil.
Kör din gulp css kommando och du borde se den korrekta koden som nu visas i filen "dest / style.css".
kropp font: 100% Helvetica, sans-serif; färg: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; typsnitt: 400; vaddering: 1,75rem; bredd: 46,5rem
I ditt nya Grunt-projekt installerar du den grunt-bidragsfria modulen med npm installera grunt-bidrag-mindre, lägg sedan till en grunt.loadNpmTasks () funktion för det under den befintliga du har för PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss'); grunt.loadNpmTasks ( 'grunt-contrib-mindre');
Du måste nu konfigurera en ny uppgift för att bearbeta LESS. Efter denna rad:
grunt.initConfig (
... men före det existerande postcss uppgift, lägg till den här koden:
mindre: produktion: filer: 'src / style.css': 'src / style.less',
Nu registrerar vi en uppgift, för att köra LESS och sedan PostCSS. Efter grunt.loadNpmTasks () funktion du bara har satt in, lägg till:
grunt.registerTask ('css', ['mindre', 'postcss']);För att testa din inställning, byt namn på din "src / style.css" -fil "style.less". Lägg till den här LESS-koden till den:
@ fontstack: Helvetica, sans-serif; @ primärfärg: # 333; kropp font: 100% @ font-stack; färg: @ primärfärg;
Kör kommandot grunt css och du ska se en ny fil skapad i din "dest" -mapp med namnet "style.css" och innehåller den här koden:
kropp font: 100% Helvetica, sans-serif; färg: # 333333;
Nu lägger vi till våra PostCSS-plugins i kompileringsflödet. Uppdatera din Gruntfile processorer array till följande:
processorer: [kräver ('autoprefixer') (), kräver ('cssnano') ()]Lägg till PostCSS-testkoden i din "style.less" -fil, kör kommandot grunt css igen och du bör hitta din återkompilerade "dest / style.css" -filen innehåller nu rätt autoprefixed och optimerad kod:
kropp font: 100% Helvetica, sans-serif; färg: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; margin: 1rem 2.5rem 2rem 1.5rem; typsnitt: 400; vaddering: 1,75rem; bredd: 46,5rem
Nästa upp kommer vi att kolla på något som du nästan kan överväga en annan typ av förbehandlings-användning av PostCSS till automatiskt genererade BEM / SUIT-kompatibla CSS-klasser. Denna process gör BEM / SUIT-utvecklingen mycket enklare att hålla reda på, för att inte tala om effektivare.
Vi ses i nästa handledning!
