Plongez dans le futur du CSS avec PostCSS - JS - Republic's Blog

Avant d’expliquer ce qu’est PostCSS, comprenons d’abord ce que PostCSS n’est pas.

Essentiellement, lorsque les gens entendent parler de PostCSS pour la première fois, ils ont tendance à le considérer comme un nouveau préprocesseur CSS, similaire à SASS, LESS et Stylus.

Si vous souhaitez l'utiliser comme préprocesseur, il fonctionnera comme un préprocesseur. En parallèle, il dispose également de post-processeurs, d'outils d'optimisation, de plug-ins compatibles avec la syntaxe future... vous disposez de toutes les fonctions que vous souhaitez.

L'objectif principal de PostCSS est de vous permettre d'utiliser une variété d'outils pour répondre à vos besoins.

Vous devriez donc considérer PostCSS comme un outil de construction. Il vous permet d'utiliser divers plug-ins JavaScript pour maintenir votre CSS. Ces plugins peuvent être trouvés dans postcss.parts ici

Comme il existe de nombreux plugins, nous passerons en revue les plus couramment utilisés et les plus puissants à travers cet article.

Dans le même temps, vous apprendrez également à utiliser Gulp pour créer une tâche unique permettant de traiter les fichiers CSS.

Préfixe automatique

Si vous avez déjà utilisé un préprocesseur, vous constaterez à quel point il est agréable de ne pas avoir à écrire de préfixes.

Par exemple, il n'est pas nécessaire d'écrire

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

Juste

:fullscreen a {
 display: flex
}

Si vous souhaitez l'essayer vous-même, vous pouvez utiliser cette démo interactive http://autoprefixer.github.io

Document cliquez ici : github.com/postcss/autoprefixer

　PréCSS

Même si PostCSS n'est pas un préprocesseur comme SASS, vous pouvez toujours traiter des fichiers au format de type Sass via certains plug-ins.

Le plug-in préféré est PreCSS, qui intègre un grand nombre de plug-ins PostCSS, permettant d'écrire des styles de syntaxe Sass.

Je vous invite à lire la documentation pour plus de détails, et également à jouer avec la démo interactive pour tester les possibilités.

CssSuivant

CSS4, la prochaine génération de CSS, promet de changer la façon dont le CSS est écrit et la façon dont les sélecteurs sont utilisés.

Malheureusement, les spécifications de cette version sont encore en cours d'élaboration et aucune date de sortie n'a encore été annoncée.

Heureusement, si vous souhaitez utiliser certaines fonctionnalités de la nouvelle génération de CSS, il existe un plug-in appelé CssNext qui peut vous aider.

Le site officiel de CSSNext répertorie toutes les fonctionnalités prises en charge : cssnext.io/features/

Vous pouvez également jouer ici : cssnext.io/playground/

CssNano

Dernier point mais non le moindre, sur l'optimisation. CssNano peut compresser et optimiser votre code CSS à l'aide de différents modules.

Je vous recommande de désactiver le z-index, car cela pourrait gâcher votre z-index normal.

Vous pouvez consulter cette liste d'optimisations : cssnano.co/optimisations/ Vous pouvez également discuter avec le créateur de CssNano sur Gitter : gitter.im/ben-eb/cssnano

Voyons maintenant comment utiliser ces plugins avec Gulp.

​Gulp x PostCSS

Avaler

Tout d’abord, installez Gulp, Gulp Load Plugins et Gulp PostCSS en tant que dépendances de développement. Exécutez la commande suivante dans la console :

npm i -D gulp gulp-load-plugins gulp-postcss

Créez un gulpfile.js où vous devez utiliser Gulp et ajoutez le code suivant.

var gulp = require('gulp'),

Ajoutez le code de Gulp Load PLugins :

$ = require('gulp-load-plugins')();

La dépendance Gulp Load Plugins appellera les plug-ins dont vous avez besoin via $.

PostCSS

Ensuite, vous devez installer le plug-in PostCSS requis de la même manière que la dépendance de développement

npm i -D autoprefixer cssnano cssnext precss

Après l'installation, ajoutez-le à gulpfile.js

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

Ensuite, commencez à écrire la tâche CSS Gulp

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

Dans cette tâche, nous utilisons d'abord une variable pour enregistrer le plug-in PostCSS à utiliser

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

Définissez le zindex:false de CssNano pour l'empêcher de réinitialiser notre z-index.

Afin de traiter les fichiers CSS, nous devons récupérer les fichiers suivants :

return gulp.src('./source/css/style.css')

Traitez ensuite le fichier CSS via le plug-in PostCSS dans la variable processeurs.

Utilisez la méthode du tuyau pour connecter le traitement en série

.pipe($.postcss(processors))

Utilisez le code suivant pour sortir le fichier traité

.pipe(gulp.dest('./public/assets/stylesheets'));

Tout ce qui précède correspond à ce que vous devez faire lorsque vous utilisez le plug-in PostCSS pour traiter le CSS.

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

Il existe un guide complet et détaillé sur Tuts+, je vous recommande fortement de le lire : webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

J'ai également utilisé ces plug-ins PostCSS pour créer un modèle passe-partout pour vous aider à démarrer rapidement : /github.com/PierrickGT/PCGB

blog.js-republic.com/jump-into-the-future-of-css-with-postcss/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!