Share
Als u geïnteresseerd bent in het gebruik van PostCSS, maar nog steeds van uw favoriete preprocessor houdt, hoeft u zich geen zorgen te maken. Je hoeft geen keuze te maken tussen deze twee - je kunt ze naast elkaar gebruiken.
Er zijn verschillende PostCSS-plug-ins die preprocessors goed aanvullen, omdat ze functionaliteit toevoegen aan uw workflow die anders onmogelijk zou zijn, of in ieder geval moeilijker, met alleen een preprocessor.
We zullen enkele van deze gratis plug-ins bespreken, dan zullen we door de installatiehandleidingen gaan om je te laten zien hoe je PostCSS zij aan zij kunt gebruiken met Sass, Stylus of LESS.
Voordat we beginnen hoe je kunt preprocessors samen met PostCSS gebruiken, we zullen er wat over praten waarom je zou willen. Het korte antwoord is: om toegang te krijgen tot PostCSS-plug-ins waarvan de functionaliteit complementair is aan preprocessors. Om u te laten zien waarom deze de moeite waard zijn, zullen we een handvol plug-ins bespreken die heel goed werken met preprocessors.
Notitie: het is misschien mogelijk om vergelijkbare eindresultaten te bereiken door mixins en functies te gebruiken in de reguliere preprocessorcode, maar met elk van de onderstaande voorbeelden wordt het proces automatisch afgehandeld. Je schrijft je CSS normaal en de plug-ins zorgen voor alles voor je, zonder functies om te bellen, geen mixins om mee te nemen of argumenten om te slagen.
Er zijn veel preprocessor-mixen geschreven om de invoeging van voorvoegsels van leveranciers af te handelen. U hebt bijvoorbeeld misschien gebruikt @omvat box-dimensionering (border-box); van de Compass-bibliotheek naar prefix van de uitvoerder box-sizing reglement.
Het probleem met het gebruik van mixins voor prefixen van leveranciers is:
Accentsconagua
box-sizing voor de manier om lang ...)Autoprefixer elimineert deze zorgen door het proces van prefixing van leveranciers automatisch aan te pakken. Autoprefixer scant uw CSS, controleert deze op gegevens van CanIUse.com en voegt vervolgens de vereiste voorvoegsels toe.
Lees meer over Autoprefixer op: https://github.com/postcss/autoprefixer
Het genereren van zowel standaard- als RTL-stijlen (van rechts naar links) vanuit een enkele bron is ook iets dat is gedaan met preprocessors, maar het vereist meestal dat op verschillende plaatsen verschillende mixins en / of interpolerende variabelen in uw code worden gebruikt. Bijvoorbeeld, in plaats van schrijven marge links: 1rem; je moet misschien schrijven marge - # dir: 1rem; of @ include margin-left (1rem);.
Met de rtlcss-plug-in van Mohammad Younes hoef je echter geen mixins of variabele interpolatie te gebruiken, je schrijft gewoon je stylesheet zoals je dat gewend bent en de plug-in zal alle instanties vinden, of "right" of "left" en ze omwisselen. Zo marge links: 1rem; wordt automatisch margin-right: 1rem; zonder dat je een speciale code hoeft te schrijven om het te laten gebeuren.
Lees meer over rtlcss op: https://github.com/MohammadYounes/rtlcss
Met de postcss-kleurenblinde plug-in van Brian Holt kun je automatisch verschillende versies van je stylesheet genereren die je uit de eerste hand laten ervaren hoe jouw ontwerp eruit zou zien voor een persoon met kleurenblindheid. Het kan acht verschillende soorten kleurenblindheid simuleren, zodat u echt goed kunt begrijpen hoe toegankelijk uw kleurenschema's zijn.
Dit is een voorbeeld van functionaliteit die u echt naar PostCSS moet gaan om te vinden, omdat preprocessors het erg moeilijk kunnen krijgen om dit te bereiken..
Lees meer over postcss-kleurenblind op: https://github.com/btholt/postcss-colorblind
De postcss-svgo-plugin van Ben Briggs kan u handsfree-optimalisatie van inline SVG-code geven. Bijvoorbeeld dit:
achtergrond: url ('data: image / svg + xml; utf-8,');Hier kan op worden gekookt, minder dan de helft van de code:
achtergrond: url ('data: image / svg + xml; utf-8,');Lees meer over postcss-svgo op: https://github.com/ben-eb/postcss-svgo
Terwijl preprocessors witruimte en opmerkingen kunnen verwijderen, kan het cssnano-pakket van Ben Briggs allerlei optimalisaties uitvoeren die verder gaan dan deze twee stappen. We behandelen cssnano in detail in de tutorial voor verkleining en optimalisatie.
Lees meer over cssnano op: https://github.com/ben-eb/cssnano
De postcss-font-goochelaar-plugin van Jonathan Neal maakt het toevoegen van aangepaste lettertypen net zo eenvoudig als het gebruik van gewone lettertypen. U hoeft geen mixins te gebruiken, voeg gewoon een toe font-family regel zoals je normaal zou doen:
body font-family: "Alice";
... en de plug-in zal vol omgaan @ Font-face generatie voor jou:
@ font-face font-family: "Alice"; lettertype: normaal; font-gewicht: 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") 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 ") body font-family: "Alice"; Lees meer over postcss-font-magician op: https://github.com/jonathantneal/postcss-font-magician
Er zijn zes installatiehandleidingen hieronder: een Gulp en Grunt gids voor elke belangrijke preprocessor. Het is niet nodig om alle zes te lezen, u kunt gewoon direct naar de handleiding gaan voor uw voorkeurswerkbalk voor preprocessor en build. Als je niet zeker weet of je Gulp of Grunt moet gebruiken, is Gulp beslist de eenvoudigste keuze voor deze tutorial.
Voor welke gids u ook volgt, u moet beginnen met een leeg Gulp- of Grunt-project. U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap. Voer vervolgens de opdracht uit met een terminal of opdrachtprompt die naar de map wijst npm installeren.
Nadat u een leeg project hebt ingesteld voor een van de onderstaande secties, moet u ook twee PostCSS-plug-ins installeren: Autoprefixer en cssnano. U kunt dit doen door de opdracht uit te voeren:
npm install autoprefixer cssnano --save-dev
We zullen deze twee plug-ins gebruiken om te testen of PostCSS en uw preprocessor samenwerken zoals verwacht.
De eerste regel voor het gebruik van een preprocessor met PostCSS is dat u altijd de preprocessor moet uitvoeren eerste. Dit is omdat u geen preprocessorspecifieke syntax in uw code wilt hebben die een PostCSS-plug-in zou kunnen verstikken, en u ook niet wilt dat PostCSS wijzigingen aanbrengt in uw code waardoor een preprocessor mogelijk niet wordt uitgevoerd zoals verwacht.
Voor elk van de preprocessors die we hebben ingesteld, laten we ze autoprefixer en cssnano uitvoeren nadat de preprocessor de compilatie heeft voltooid. In beide gevallen moeten we een aantal testcodes toevoegen om deze twee plug-ins te kunnen gebruiken.
Als u dezelfde code in elk gedeelte hieronder wilt herhalen en een instructie wilt zien waarin staat dat u uw PostCSS-testcode moet toevoegen, voegt u dit toe aan het bronbestand van de preprocessor waar u aan werkt:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano zal deze opmerking verwijderen * / display: flex; font-gewicht: normaal; margin-top: 1rem; margin-bottom: 2rem; marge links: 1,5 rem; margin-right: 2,5rem; font-gewicht: normaal; opvulling: 1.75rem; breedte: calc (50rem - (2 * 1,75 rem));
Als dit lukt, zal uw gecompileerde code in elk geval verschijnen als:
.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- gewicht: 400; padding: 1.75rem; breedte: 46.5rem
Notitie: het gebruik van flexbox is automatisch gereviseerd en cssnano heeft meerdere optimalisaties van de code uitgevoerd. We gebruiken dezelfde code om cssnano te testen zoals we in de vorige handleiding voor minificatie en optimalisatie hebben gedaan. Raadpleeg daarom de sectie 'cssnano' voor meer informatie over de optimalisaties die worden uitgevoerd.
Omdat u al met Node.js werkt om Gulp of Grunt en PostCSS uit te voeren, is de eenvoudigste manier om Sass naast hen te gebruiken, het via LibSass te doen. Dit is ook aanzienlijk sneller dan Ruby Sass. We zullen LibSass inzetten via de gulp-sass of grunt-contrib-sass modules.
Installeer de gulp-sass-module in uw project met npm install gulp-sass --save-dev.
Nu kunt u uw Gulpfile updaten naar het volgende:
var gulp = vereisen ('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]; return gulp.src ('./ src / *. scss') .pipe (sass (). on ('error', sass .logError)) .pipe (postcss (processors)) .pipe (gulp.dest ('./ dest')););Laten we opsplitsen wat we hebben veranderd van de standaard starters Gulpfile:
slok-Sass, autoprefixer en cssnano autoprefixer en cssnano variabelen voor de processors rangschikkingpijp() lijn, .leiding (sass () ... , om de Sass te verwerken, en zorg ervoor dat deze voor de regel staat die PostCSS verwerktNu kunnen we wat tests uitvoeren om ervoor te zorgen dat zowel Sass als PostCSS volgens de verwachtingen worden samengesteld.
Hernoem je bestaande "src / style.css" bestand naar "src / style.scss" en voeg de volgende testcode eraan toe:
$ font-stack: Helvetica, sans-serif; $ primaire kleur: # 333; body font: 100% $ font-stack; kleur: $ primaire kleur;
Rennen slok css en je zou een nieuw "style.css" bestand moeten zien verschijnen in je "dest" map met de inhoud:
lichaam font: 100% Helvetica, sans-serif; kleur: # 333;
Voeg nu de PostCSS-testcode die eerder in deze zelfstudie is toegevoegd, toe aan uw "style.scss" -bestand.
Voer je uit slok css commando en je zou de juiste code moeten zien verschijnen in je "dest / style.css" bestand:
body font: 100% Helvetica, sans-serif; color: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; weergave: flex; marge: 1rem 2,5rem 2rem 1,5rem; lettertype: 400; opvulling: 1.75rem; breedte: 46.5rem
Ga naar je nieuwe Grunt-project en installeer de grunt-contrib-sass-module met npm install grunt-contrib-sass.
Voeg vervolgens een toe grunt.loadNpmTasks () functie ervoor onder de bestaande die u hebt voor PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss); grunt.loadNpmTasks ( 'grunt-contrib-sass');
U moet nu een nieuwe taak instellen voor het verwerken van Sass. Na deze regel:
grunt.initConfig (
... maar vóór het bestaande postcss taak, voeg deze code toe:
sass: dist: files: 'src / style.css': 'src / style.scss',
Nu registreren we een taak die Sass en vervolgens PostCSS uitvoert. Na de grunt.loadNpmTasks () functie die u zojuist hebt ingevoegd, voegt u toe:
grunt.registerTask ('css', ['sass', 'postcss']);Om je setup te testen, hernoem je je bestaande "src / style.css" bestand naar "style.scss". Voeg deze Sass-code eraan toe:
$ font-stack: Helvetica, sans-serif; $ primaire kleur: # 333; body font: 100% $ font-stack; kleur: $ primaire kleur;
Voer het commando uit grunt css en je zou een nieuw bestand zien aangemaakt in je "dest" map genaamd "style.css" en deze code bevatten:
lichaam font: 100% Helvetica, sans-serif; kleur: # 333;
We krijgen nu onze Autoprefixer- en cssnano-plug-ins. Werk je Gruntfiles bij processors matrix naar het volgende:
processors: [require ('autoprefixer') (), require ('cssnano') ()]Voeg de PostCSS-testcode toe aan uw "style.scss" -bestand en voer de opdracht uit grunt css nogmaals en je zou moeten vinden dat je opnieuw gecompileerde "dest / style.css" bestand nu de juiste autopreferte en geoptimaliseerde code bevat.
Stylus en PostCSS werken bijzonder goed samen dankzij de creatie van het PostStylus-pakket door Sean King, dat de verwerking van zowel Stylus als PostCSS combineert. Als u een Stylus-ontwikkelaar bent, kunt u PostStylus gewoon aan uw compilatieproces toevoegen en onmiddellijk toegang hebben tot het gebruik van PostCSS-plug-ins als onderdeel van uw werkstroom.
PostStylus: https://github.com/seaneking/poststylus
Als je de premade Gulpfile gebruikt van het startersproject, zul je merken dat het de gulp-postcss plug-in gebruikt. Dit is eigenlijk alleen daar omdat het nodig is voor de Sass- en LESS-installatieprocessen, maar voor Stylus hebben we het niet nodig omdat we PostStylus als onze compiler gebruiken.
Je kunt het uit je project verwijderen met npm uninstall gulp-postcss --save-dev, en verwijder deze regel uit je Gulpfile:
var postcss = require ('gulp-postcss');Nu kunnen we de twee plug-ins installeren die we nodig hebben voor de Stylus- en PostCSS-compilatie, door de opdracht uit te voeren:
npm install gulp-stylus poststylus --save-dev
Werk uw Gulpfile bij om te worden:
var gulp = vereisen ('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]; return gulp.src ('./ src / *. styl') .pipe (stylus (gebruik: [poststylus (processors)] )) .pipe (gulp.dest ('./ dest')););Dit is wat we hierboven hebben gedaan:
slok-stylus, poststylus, autoprefixer en cssnano autoprefixer en cssnano variabelen voor de processors rangschikking.pijp() regel die leest .leiding (postcss (processoren)) .leiding (stylus (... , om de gulp-stylus en poststylus modules in te stellen voor onze compilatie Nu zijn we klaar om de compilatie te testen. Wijzig in de map "src" de naam "style.css" in "style.styl" en voeg deze teststripcode toe:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 body font: 100% $ font-stack color: $ primaire kleur
Voer de ... uit slok css commando en je zou een "style.css" bestand moeten zien verschijnen in je "dest" map met deze inhoud:
lichaam font: 100% Helvetica, sans-serif; kleur: # 333;
Voeg de PostCSS-testcode toe die eerder aan uw 'style.styl'-bestand is geleverd, waarbij u ervoor zorgt dat alleen tab-inspringen in de geplakte code voorkomen, en niet in spaties.
Hercompileer en controleer of je de juiste uitvoer hebt in je "dest / style.css" -bestand.
body font: 100% Helvetica, sans-serif; color: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; weergave: flex; marge: 1rem 2,5rem 2rem 1,5rem; lettertype: 400; opvulling: 1.75rem; breedte: 46.5rem
Net als bij het Gulp-project voor Stylus is de standaard PostCSS-compiler die bij het startersproject wordt geleverd, niet vereist, omdat deze puur is voor Sass- en LESS-configuratieprocessen. Je kunt het uit je project verwijderen met npm uninstall grunt-postcss --save-dev.
Nu kunnen we grunt-contrib-stylus en poststylus installeren met het commando:
npm install grunt-contrib-stylus poststylus --save-dev
We gebruiken geen grunt-postcss meer, dus zoek deze regel:
grunt.loadNpmTasks ( 'grunt-postcss);
En vervang het door:
grunt.loadNpmTasks ( 'grunt-contrib-stift');
Gezien we geen grunt-postcss gebruiken, betekent dit dat we de. Niet langer nodig hebben postcss taak die we binnen hebben gedefinieerd grunt.initConfig (...);. Verwijder die taakconfiguratie en vervang deze door deze nieuw schrijfstift taak:
stylus: compile: options: , files: 'dest / style.css': 'src / style.styl'
Nu zijn we klaar om de compilatie te testen. Wijzig in de map "src" de naam "style.css" in "style.styl" en voeg deze teststripcode toe:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 body font: 100% $ font-stack color: $ primaire kleur
Voer het commando uit grommende naald en je zou een "style.css" bestand moeten zien verschijnen in je "dest" map met deze inhoud:
lichaam font: 100% Helvetica, sans-serif; color: # 333
Om onze PostCSS-plug-ins toe te voegen aan het compilatieproces, moeten we eerst deze code toevoegen aan de top van onze Grunt-bestanden, boven de module.exports ... lijn:
var poststylus = function () return require ('poststylus') (['autoprefixer', 'cssnano']);Dit is waar u laadt in alle PostCSS-plug-ins die u wilt gebruiken, in plaats van in een processors array zoals u gewend bent van onze andere tutorials.
Zoek dan de opties object in de stylustaak en werk het bij naar het volgende:
opties: gebruik: [poststylus],
Dit vertelt grunt-contrib-stylus om poststylus te gebruiken tijdens het compileren, en de bijbehorende plug-ins.
Voeg de "PostCSS-testcode" toe aan uw "src / style.styl" -bestand, voer het uit grommende naald, en je zou de volgende inhoud geschreven in je "dest / style.css" bestand moeten zien:
body font: 100% Helvetica, sans-serif; color: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; weergave: flex; marge: 1rem 2,5rem 2rem 1,5rem; lettertype: 400; opvulling: 1.75rem; breedte: 46.5rem
Installeer de gulp-less module in uw project met npm installeer gulp-less --save-dev.
Nu kunt u uw Gulpfile updaten naar het volgende:
var gulp = vereisen ('gulp'); var postcss = require ('gulp-postcss'); var minder = vereisen ('gulp-less'); var autoprefixer = require ('autoprefixer'); var cssnano = require ('cssnano'); gulp.task ('css', function () var processors = [autoprefixer, cssnano]; return gulp.src ('./ src / *. less') .pipe (less ()) .pipe (postcss (processors) ) .pipe (gulp.dest ('./ dest')););Laten we opsplitsen wat we hebben veranderd van de standaard starters Gulpfile:
slok-less, autoprefixer en cssnano autoprefixer en cssnano variabelen voor de processors rangschikking.leiding (minder ()) om de MINDER te verwerken, en zorg ervoor dat deze voor de regel staat die PostCSS verwerktNu kunnen we wat tests uitvoeren om ervoor te zorgen dat zowel LESS als PostCSS naar verwachting worden samengesteld.
Hernoem het bestaande "src / style.css" bestand naar "src / style.less" en voeg de volgende testcode eraan toe:
@ font-stack: Helvetica, sans-serif; @ primaire kleur: # 333; body font: 100% @ font-stack; kleur: @ primaire kleur;
Rennen slok css en je zou een nieuw "style.css" bestand moeten zien verschijnen in je "dest" map met de inhoud:
lichaam font: 100% Helvetica, sans-serif; color: # 333
Voeg nu aan uw "style.less" -bestand de PostCSS-testcode toe die eerder in deze zelfstudie is verstrekt.
Voer je uit slok css commando en je zou nu de juiste code moeten zien verschijnen in je "dest / style.css" bestand.
body font: 100% Helvetica, sans-serif; color: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; weergave: flex; marge: 1rem 2,5rem 2rem 1,5rem; lettertype: 400; opvulling: 1.75rem; breedte: 46.5rem
Stap in je nieuwe Grunt-project en installeer de grunt-contribless-module met npm install grunt-contrib-less, voeg dan een toe grunt.loadNpmTasks () functie ervoor onder de bestaande die u hebt voor PostCSS:
grunt.loadNpmTasks ( 'grunt-postcss); grunt.loadNpmTasks ( 'grunt-contrib-loze');
U moet nu een nieuwe taak instellen om LESS te verwerken. Na deze regel:
grunt.initConfig (
... maar vóór het bestaande postcss taak, voeg deze code toe:
minder: productie: files: 'src / style.css': 'src / style.less',
Nu registreren we een taak, om LESS uit te voeren en vervolgens PostCSS. Na de grunt.loadNpmTasks () functie die u zojuist hebt ingevoegd, voegt u toe:
grunt.registerTask ('css', ['less', 'postcss']);Test je setup door je "src / style.css" -bestand "style.less" te hernoemen. Voeg deze LESS-code eraan toe:
@ font-stack: Helvetica, sans-serif; @ primaire kleur: # 333; body font: 100% @ font-stack; kleur: @ primaire kleur;
Voer het commando uit grunt css en je zou een nieuw bestand zien aangemaakt in je "dest" map genaamd "style.css" en deze code bevatten:
lichaam font: 100% Helvetica, sans-serif; kleur: # 333333;
Nu voegen we onze PostCSS-plug-ins toe aan de compilatiestroom. Werk je Gruntfiles bij processors matrix naar het volgende:
processors: [require ('autoprefixer') (), require ('cssnano') ()]Voeg de PostCSS-testcode toe aan uw "style.less" -bestand en voer de opdracht uit grunt css nogmaals en je zou moeten vinden dat je opnieuw gecompileerde "dest / style.css" bestand nu de juiste autopreferte en geoptimaliseerde code bevat:
body font: 100% Helvetica, sans-serif; color: # 333 .css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; weergave: flex; marge: 1rem 2,5rem 2rem 1,5rem; lettertype: 400; opvulling: 1.75rem; breedte: 46.5rem
Vervolgens gaan we kijken naar iets dat je bijna zou kunnen beschouwen als een ander type voorbewerking - met behulp van PostCSS naar automatisch gegenereerde BEM / SUIT-compatibele CSS-klassen. Dit proces maakt de BEM / SUIT-ontwikkeling veel eenvoudiger bij te houden, om nog te zwijgen van efficiënter.
Tot ziens in de volgende zelfstudie!
