Share
Si vous êtes intéressé par PostCSS, mais que vous aimez toujours votre préprocesseur préféré, ne vous inquiétez pas. Vous n'avez pas besoin de choisir entre les deux, vous pouvez les utiliser l'un à côté de l'autre..
Il existe plusieurs plug-ins PostCSS qui complètent très bien les préprocesseurs, car ils ajoutent des fonctionnalités à votre flux de travail qui seraient autrement impossibles, ou du moins plus difficiles, en utilisant uniquement un préprocesseur..
Nous aborderons certains de ces plugins complémentaires, puis nous passerons en revue les guides de configuration pour vous montrer comment utiliser PostCSS côte à côte avec Sass, Stylus ou LESS..
Avant d'entrer dans Comment vous pouvez utiliser les pré-processeurs avec PostCSS, nous en parlerons un peu Pourquoi vous voudriez. La réponse courte est: pour accéder aux plugins PostCSS dont la fonctionnalité complète les pré-processeurs. Pour vous montrer pourquoi cela vaut la peine de le faire, nous allons passer en revue une poignée de plugins qui fonctionnent vraiment bien avec les pré-processeurs..
Remarque: il est possible d’obtenir des résultats finaux similaires en utilisant mixins et des fonctions dans le code normal du préprocesseur, mais avec chacun des exemples ci-dessous, le processus est géré automatiquement. Vous écrivez votre CSS normalement et les plugins s’occupent de tout pour vous, sans fonctions à appeler, sans mixins à inclure, ni arguments à transmettre..
De nombreux pré-processeurs ont été écrits pour traiter l'insertion de préfixes de vendeurs. Par exemple, vous avez peut-être utilisé @include box-sizing (border-box); de la bibliothèque Compass au fournisseur de sortie avec le préfixe taille de la boîte règles.
Le problème avec s'appuyer sur mixins pour les préfixes de fournisseur est:
Accentsconagua
taille de la boîte pour le chemin à long…)Le préfixe automatique élimine ces problèmes en gérant automatiquement le processus de préfixe du fournisseur. Autoprefixer analyse votre code CSS, le compare aux données de CanIUse.com, puis ajoute les préfixes requis..
Pour en savoir plus sur le préfixe automatique, consultez la page https://github.com/postcss/autoprefixer.
Générer à la fois des feuilles de style par défaut et RTL (de droite à gauche) à partir d'une source est également quelque chose qui a été fait avec les préprocesseurs. Toutefois, cela nécessite généralement l'utilisation de plusieurs mixins et / ou l'interpolation de variables dans votre code à plusieurs endroits. Par exemple, plutôt que d'écrire marge gauche: 1rem; vous pourriez avoir besoin d'écrire margin - # dir: 1rem; ou @include margin-left (1 rem);.
Cependant, avec le plugin rtlcss de Mohammad Younes, vous n'avez pas besoin d'utiliser mixins ou interpolation variable, vous écrivez simplement votre feuille de style comme d'habitude et le plugin trouvera toutes les occurrences ou «droite» ou «gauche» et les échangera. Alors marge gauche: 1rem; devient automatiquement marge droite: 1rem; sans avoir à écrire de code spécial pour y arriver.
En savoir plus sur rtlcss sur: https://github.com/MohammadYounes/rtlcss
Avec le plugin postcss-colorblind de Brian Holt, vous pouvez générer automatiquement différentes versions de votre feuille de style qui vous donnent une expérience directe de ce à quoi ressemblerait votre conception pour une personne daltonienne. Il peut simuler huit types différents de daltonisme, vous aidant à bien comprendre à quel point vos combinaisons de couleurs sont accessibles..
C’est un exemple de fonctionnalité que vous devez vraiment consulter dans PostCSS, car il serait très difficile pour les pré-processeurs de réaliser ces tâches..
Pour en savoir plus sur postcss-colorblind, rendez-vous sur: https://github.com/btholt/postcss-colorblind
Le plugin postcss-svgo de Ben Briggs peut vous donner une optimisation mains libres du code SVG en ligne. Par exemple ceci:
background: url ('data: image / svg + xml; utf-8,');On peut résumer cela à moins de la moitié du code:
background: url ('data: image / svg + xml; utf-8,');Pour en savoir plus sur postcss-svgo, rendez-vous sur: https://github.com/ben-eb/postcss-svgo
Bien que les préprocesseurs puissent supprimer les espaces et les commentaires, le pack cssnano de Ben Briggs peut effectuer toutes sortes d’optimisations au-delà de ces deux étapes. Nous couvrons cssnano en détail dans le tutoriel Pour la minification et l’optimisation.
Pour en savoir plus sur cssnano, rendez-vous sur: https://github.com/ben-eb/cssnano
Le plugin postcss-font-magician de Jonathan Neal facilite l’ajout de polices personnalisées à l’utilisation de polices classiques. Vous n'avez pas besoin d'utiliser de mixins, ajoutez simplement un famille de polices règle comme vous le feriez normalement:
body font-family: "Alice";
… Et le plugin va gérer plein @ font-face génération pour vous:
@ font-face font-family: "Alice"; style de police: normal; poids de la police: 400; src: local ("Alice"), local ("Alice-Regular"), url ("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") ("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 "), format (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") format (" truetype ") corps police "Alice"; En savoir plus sur postcss-font-magician à l'adresse: https://github.com/jonathantneal/postcss-font-magician
Il existe six guides de configuration ci-dessous: un guide Gulp et Grunt pour chaque préprocesseur majeur. Il n'est pas nécessaire de lire les six, vous pouvez simplement passer directement au guide pour votre préprocesseur et votre outil de création préférés. Si vous n'êtes pas sûr d'utiliser Gulp ou Grunt, Gulp est le choix le plus simple pour ce tutoriel..
Quel que soit le guide que vous suivez, vous devrez commencer par un projet vide Gulp ou Grunt. Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
respectivement.
Toutefois, si vous ne souhaitez pas configurer votre projet à partir de zéro, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage Gulp ou Grunt fourni dans un dossier de projet vide. Puis avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Une fois que vous avez configuré un projet vide pour l’une des sections ci-dessous, vous devez également installer deux plug-in PostCSS: Autoprefixer et cssnano. Vous pouvez le faire en lançant la commande:
npm installe autoprefixer cssnano --save-dev
Nous utiliserons ces deux plugins pour vérifier que PostCSS et votre préprocesseur fonctionnent ensemble comme prévu..
La première règle d’utilisation d’un préprocesseur avec PostCSS est que vous devez toujours exécuter ledit préprocesseur. premier. En effet, vous ne souhaitez pas que votre code contienne une syntaxe spécifique au préprocesseur susceptible d'étouffer un plug-in PostCSS, et vous ne souhaitez pas non plus que PostCSS modifie votre code afin d'empêcher un préprocesseur de s'exécuter comme prévu..
Pour chacun des préprocesseurs que nous configurons, nous leur demanderons d’exécuter autoprefixer et cssnano après la compilation du préprocesseur. Dans chaque cas, nous devrons ajouter du code de test pour que ces deux plugins fonctionnent.
Pour éviter de répéter le même code dans chaque section ci-dessous, lorsque vous voyez une instruction vous invitant à ajouter votre code de test PostCSS, veuillez l'ajouter au fichier source du préprocesseur sur lequel vous travaillez:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano supprimera ce commentaire * / display: flex; poids de police: normal; marge supérieure: 1rem; marge en bas: 2rem; marge gauche: 1,5 rem; marge droite: 2.5rem; poids de police: normal; rembourrage: 1.75rem; largeur: calc (50rem - (2 * 1,75rem));
En cas de succès, votre code compilé apparaîtra dans les deux cas:
.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- poids: 400; rembourrage: 1,75rem; largeur: 46,5rem
Remarque: les utilisations de flexbox ont été auto-préfixées et cssnano a effectué plusieurs optimisations du code. Nous utilisons le même code pour tester cssnano que dans le didacticiel précédent Pour la minification et l'optimisation, veuillez donc vous reporter à la section «cssnano» pour plus de détails sur les optimisations en cours..
Comme vous travaillez déjà avec Node.js pour exécuter Gulp ou Grunt et PostCSS, la façon la plus simple d’utiliser Sass à leurs côtés est de le faire via LibSass. C'est aussi considérablement plus rapide que Ruby Sass. Nous déploierons LibSass via les modules gulp-sass ou grunt-contrib-sass.
Installez le module gulp-sass dans votre projet avec npm installer gulp-sass --save-dev.
Vous pouvez maintenant mettre à jour votre fichier Gulpfile comme suit:
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 () processeurs var = = préfixe automatique, cssnano]; retourne gulp.src ('./ src / *. scss') .pipe (sass (). on ('error', sass .logError)) .pipe (postcss (processeurs)) .pipe (gulp.dest ('./ dest')););Décrivons ce que nous avons changé par rapport au fichier de démarrage par défaut Gulpfile:
gulp-sass, préfixe automatique et Cssnano préfixe automatique et Cssnano variables à la processeurs tableautuyau() ligne, .pipe (sass…) , pour traiter le Sass, en veillant à le placer avant la ligne qui traite PostCSSNous pouvons maintenant exécuter des tests pour nous assurer que Sass et PostCSS compilent comme prévu.
Renommez votre fichier «src / style.css» existant en «src / style.scss» et ajoutez-y le code de test suivant:
$ font-stack: Helvetica, sans-serif; $ couleur primaire: # 333; body font: 100% $ font-stack; couleur: $ primaire-couleur;
Courir gulp css et vous devriez voir un nouveau fichier “style.css” apparaître dans votre dossier “dest” avec le contenu:
corps font: 100% Helvetica, sans-serif; couleur: # 333;
Maintenant, ajoutez le code de test PostCSS fourni précédemment dans ce tutoriel à votre fichier «style.scss»..
Courez votre gulp css et le code correct devrait apparaître dans votre fichier «dest / style.css»:
body font: 100% Helvetica, sans-serif; couleur: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; marge: 1rem 2.5rem 2rem 1.5rem; poids de la police: 400; remplissage: 1,75rem; largeur: 46,5rem
Dans votre nouveau projet Grunt, installez le module grunt-contrib-sass avec npm installer grunt-contrib-sass.
Puis ajoutez un grunt.loadNpmTasks () fonctionne pour celui-ci sous celui que vous avez pour PostCSS:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-sass');Vous devez maintenant configurer une nouvelle tâche pour traiter Sass. Après cette ligne:
grunt.initConfig (
… Mais avant l'existant postcss tâche, ajoutez ce code:
sass: dist: fichiers: 'src / style.css': 'src / style.scss',
Nous allons maintenant enregistrer une tâche qui exécutera Sass puis PostCSS. Après le grunt.loadNpmTasks () fonction que vous venez d'insérer, ajoutez:
grunt.registerTask ('css', ['sass', 'postcss']);Pour tester votre configuration, renommez votre fichier «src / style.css» existant en «style.scss». Ajoutez-y ce code Sass:
$ font-stack: Helvetica, sans-serif; $ couleur primaire: # 333; body font: 100% $ font-stack; couleur: $ primaire-couleur;
Lancer la commande grunt css et vous devriez voir un nouveau fichier créé dans votre dossier «dest» nommé «style.css» et contenant ce code:
corps font: 100% Helvetica, sans-serif; couleur: # 333;
Nous allons maintenant lancer nos plugins Autoprefixer et cssnano. Mettez à jour vos fichiers Gruntfile processeurs tableau à la suivante:
processeurs: [require ('autoprefixer') (), require ('cssnano') ()]Ajoutez le code de test PostCSS à votre fichier “style.scss”, exécutez la commande grunt css à nouveau et vous devriez trouver votre fichier «dest / style.css» recompilé contient maintenant le code correct avec optimisation automatique et optimisé.
Stylus et PostCSS fonctionnent particulièrement bien ensemble grâce à la création du progiciel PostStylus de Sean King, qui associe le traitement de Stylus et de PostCSS. Si vous êtes un développeur Stylus, vous pouvez simplement ajouter PostStylus à votre processus de compilation et avoir immédiatement accès à l’utilisation des plugins PostCSS dans le cadre de votre flux de travail..
PostStylus: https://github.com/seaneking/poststylus
Si vous utilisez le fichier Gulp prédéfini du projet de démarrage, vous remarquerez qu'il utilise le plug-in gulp-postcss. En réalité, c'est uniquement là car il est nécessaire pour les processus d'installation Sass et LESS, mais pour Stylus, nous n'en aurons pas besoin, car nous utilisons plutôt PostStylus comme compilateur..
Vous pouvez le supprimer de votre projet avec npm désinstaller gulp-postcss --save-dev, et supprimez cette ligne de votre fichier Gulp:
var postcss = require ('gulp-postcss');Nous pouvons maintenant installer les deux plugins nécessaires à la compilation Stylus et PostCSS, en exécutant la commande suivante:
npm installer gulp-stylus poststylus --save-dev
Mettez à jour votre fichier Gulpfile pour devenir:
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 () processeurs var = = préfixe automatique, cssnano]; renvoyer gulp.src ('./ src / *. styl') .pipe (stylus (utilisation: [poststylus (processeurs)] )) .pipe (gulp.dest ('./ dest')););Voici ce que nous avons fait ci-dessus:
gulp-stylus, poststyle, préfixe automatique et Cssnano préfixe automatique et Cssnano variables à la processeurs tableau.tuyau() ligne qui lit .pipe (postcss (processeurs)) .pipe (stylet (… , définir les modules gulp-stylus et poststylus pour gérer notre compilation Nous sommes maintenant prêts à tester la compilation. Dans votre dossier «src», renommez «style.css» en «style.styl» et ajoutez ce code de stylet de test:
$ font-stack = Helvetica, sans-serif $ primaire-couleur = # 333 police du corps: 100% $ font-stack couleur: $ primaire-couleur
Exécuter le gulp css et vous devriez voir un fichier “style.css” apparaître dans votre dossier “dest” avec ce contenu:
corps font: 100% Helvetica, sans-serif; couleur: # 333;
Ajoutez le code de test PostCSS fourni précédemment dans votre fichier «style.styl», en veillant à ce que le code collé ne comporte que des retraits d'onglets.
Recompilez et vérifiez que vous avez la sortie appropriée dans votre fichier «dest / style.css».
body font: 100% Helvetica, sans-serif; couleur: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; marge: 1rem 2.5rem 2rem 1.5rem; poids de la police: 400; remplissage: 1,75rem; largeur: 46,5rem
Comme avec le projet Gulp pour Stylus, le compilateur PostCSS par défaut fourni avec le projet de démarrage n’est pas requis, car il n’est là que pour les processus d’installation Sass et LESS. Vous pouvez le supprimer de votre projet avec npm désinstaller grunt-postcss --save-dev.
Maintenant nous pouvons installer grunt-contrib-stylus et poststylus avec la commande:
npm installer grunt-contrib-stylus poststylus --save-dev
Nous n'utiliserons plus grunt-postcss, alors localisez cette ligne:
grunt.loadNpmTasks ('grunt-postcss');Et remplacez-le par:
grunt.loadNpmTasks ('grunt-contrib-stylus');Étant donné que nous n’utilisons pas grunt-postcss, cela signifie que nous n’aurons plus besoin de la postcss tâche que nous avons définie à l'intérieur grunt.initConfig (…);. Supprimer cette config de tâche et la remplacer par cette nouvelle style tâche:
stylet: compile: options: , fichiers: 'dest / style.css': 'src / style.styl'
Nous sommes maintenant prêts à tester la compilation. Dans votre dossier «src», renommez «style.css» en «style.styl» et ajoutez ce code de stylet de test:
$ font-stack = Helvetica, sans-serif $ primaire-couleur = # 333 police du corps: 100% $ font-stack couleur: $ primaire-couleur
Lancer la commande stylet grunt et vous devriez voir un fichier “style.css” apparaître dans votre dossier “dest” avec ce contenu:
corps font: 100% Helvetica, sans serif; couleur: # 333
Pour ajouter nos plugins PostCSS au processus de compilation, nous devons d’abord ajouter ce code au sommet de notre fichier Gruntfile, au-dessus du module.exports… ligne:
var poststylus = function () return require ('poststylus') (['autoprefixer', 'cssnano']);C’est là que vous allez charger tous les plugins PostCSS que vous souhaitez utiliser, plutôt que dans un fichier. processeurs tableau comme vous serez habitué à partir de nos autres tutoriels.
Puis trouvez le options objet dans la tâche du stylet et mettez-le à jour comme suit:
options: utiliser: [poststylus],
Cela indique à grunt-contrib-stylus d’utiliser poststylus lors de la compilation, ainsi que ses plugins..
Ajoutez le «code de test PostCSS» à votre fichier «src / style.styl», exécutez stylet grunt, et vous devriez voir le contenu suivant écrit dans votre fichier «dest / style.css»:
body font: 100% Helvetica, sans-serif; couleur: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; marge: 1rem 2.5rem 2rem 1.5rem; poids de la police: 400; remplissage: 1,75rem; largeur: 46,5rem
Installez le module gulp-less dans votre projet avec npm install gulp-less --save-dev.
Vous pouvez maintenant mettre à jour votre fichier Gulpfile comme suit:
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 () processeurs var = = préfixe automatique, cssnano]; renvoie gulp.src ('./ src / *. less') .pipe (less (moins ())) .pipe (postcss (processeurs) ) .pipe (gulp.dest ('./ dest')););Décrivons ce que nous avons changé par rapport au fichier de démarrage par défaut Gulpfile:
gulp-less, préfixe automatique et Cssnano préfixe automatique et Cssnano variables à la processeurs tableau.tuyau (moins ()) pour traiter le moins, en veillant à le placer avant la ligne qui traite PostCSSNous pouvons maintenant exécuter des tests pour nous assurer que LESS et PostCSS compilent comme prévu.
Renommez le fichier «src / style.css» existant en «src / style.less» et ajoutez-y le code de test suivant:
@ font-stack: Helvetica, sans-serif; @ couleur primaire: # 333; body font: 100% @ font-stack; couleur: @ couleur primaire;
Courir gulp css et vous devriez voir un nouveau fichier “style.css” apparaître dans votre dossier “dest” avec le contenu:
corps font: 100% Helvetica, sans serif; couleur: # 333
Maintenant, dans votre fichier «style.less», ajoutez le code de test PostCSS fourni précédemment dans ce tutoriel..
Courez votre gulp css la commande et vous devriez voir le bon code apparaître maintenant dans votre fichier “dest / style.css”.
body font: 100% Helvetica, sans-serif; couleur: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; marge: 1rem 2.5rem 2rem 1.5rem; poids de la police: 400; remplissage: 1,75rem; largeur: 46,5rem
Dans votre nouveau projet Grunt, installez le module grunt-contrib-less avec npm installer grunt-contrib-less, puis ajoutez un grunt.loadNpmTasks () fonctionne pour celui-ci sous celui existant pour PostCSS:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-less');Vous devez maintenant configurer une nouvelle tâche pour le traitement de LESS. Après cette ligne:
grunt.initConfig (
… Mais avant l'existant postcss tâche, ajoutez ce code:
less: production: fichiers: 'src / style.css': 'src / style.less',
Nous allons maintenant enregistrer une tâche pour exécuter LESS, puis PostCSS. Après le grunt.loadNpmTasks () fonction que vous venez d'insérer, ajoutez:
grunt.registerTask ('css', ['moins', 'postcss']);Pour tester votre configuration, renommez votre fichier «src / style.css» «style.less». Ajoutez-y ce code MOINS:
@ font-stack: Helvetica, sans-serif; @ couleur primaire: # 333; body font: 100% @ font-stack; couleur: @ couleur primaire;
Lancer la commande grunt css et vous devriez voir un nouveau fichier créé dans votre dossier «dest» nommé «style.css» et contenant ce code:
corps font: 100% Helvetica, sans-serif; couleur: # 333333;
Nous allons maintenant ajouter nos plugins PostCSS au flux de compilation. Mettez à jour vos fichiers Gruntfile processeurs tableau à la suivante:
processeurs: [require ('autoprefixer') (), require ('cssnano') ()]Ajoutez le code de test PostCSS à votre fichier “style.less”, exécutez la commande grunt css encore et vous devriez trouver votre fichier "dest / style.css" recompilé contient maintenant le code correct avec optimisation automatique et optimisé:
body font: 100% Helvetica, sans-serif; couleur: # 333 .css_nano, .css_nano + p, [classe * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms -flexbox; display: flex; marge: 1rem 2.5rem 2rem 1.5rem; poids de la police: 400; remplissage: 1,75rem; largeur: 46,5rem
Ensuite, nous allons vérifier quelque chose que vous pourriez presque envisager comme type de pré-traitement: utiliser PostCSS pour générer automatiquement des classes CSS conformes à BEM / SUIT. Ce processus rend le développement de BEM / SUIT beaucoup plus facile à suivre, pour ne pas dire plus efficace.
A bientôt dans le prochain tutoriel!
