Comment construire votre propre préprocesseur CSS avec POSTCSS

Points clés

• POSTCSS permet aux développeurs de construire leurs propres préprocesseurs CSS, offrant une plus grande flexibilité et un contrôle sur d'autres préprocesseurs tels que SASS, moins ou stylet. Il utilise le plugin JavaScript pour manipuler les styles et est capable d'ajouter des fonctionnalités de type préprocesseur telles que les variables, les mixins et la nidification.
• Les avantages du POSTCSS comprennent la modularité, les versions légères, la mise en œuvre instantanée de nouvelles fonctionnalités et la capacité d'appliquer des stratégies de développement. Il est également plus rapide que les préprocesseurs traditionnels. Cependant, il présente également certains inconvénients, tels que la complexité accrue du processus de construction, la syntaxe différente et les exigences d'un CSS efficace.
• Bien que PostCSS ait un grand potentiel, il peut ne pas convenir à tous les projets. Il peut s'agir d'une option attrayante pour les petits projets simples ou les équipes uniques. Mais pour les grandes équipes ou les projets, les préprocesseurs existants peuvent toujours être le premier choix en raison de la large compréhension et de l'utilisation du SASS.

De nombreux développeurs ont adopté moins, le stylet ou le SASS le plus populaire actuellement. Idéalement, vous devez également post-traitement de votre CSS en utilisant AutopRefixer pour ajouter des préfixes de fournisseurs en cas de besoin sans utiliser de frameworks comme Mixin ou Compass. Autoprefixer est un plugin pour PostCSS; Il existe de nombreux autres plugins disponibles qui implémentent des fonctionnalités de type préprocesseur telles que les variables, les mixins et la nidification. Le récent article de Ben Frain "Breaking up with Sass: Not You, It's Me" met en avant une proposition intéressante. Étant donné que vous pouvez utiliser POSTCSS pour créer le préprocesseur CSS que vous souhaitez, avez-vous vraiment besoin de sass, moins ou stylet? Un analyseur de base de type SASS peut être créé pendant votre processus de construction. Dans cet exemple, j'utiliserai un fichier de tâche Gulp.js, mais le même concept s'applique au grognement ou à tout autre système de construction. Tout d'abord, nous utilisons NPM pour installer PostCSS et les plugins requis, par exemple:

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

Créez ensuite un tableau de fonctions de traitement CSS dans gulpfile.js, par exemple:

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

et écrivez une tâche de traitement CSS, par exemple:

// 编译CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

Vous pouvez également utiliser l'API PostCSS pour créer vos propres fonctions de traitement. Par exemple, nous pouvons appliquer un replacement sans-serif pour toutes les déclarations de la famille:

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后备
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

Si le fichier /source/css/styles.css contient le code suivant:

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

Running Gulp CSS créera ce CSS dans /dest/css/styles.css:

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

Avantages

POSTCSS vous permet de vous débarrasser des restrictions et des choix imposés par les auteurs de préprocesseurs. Cette méthode offre plusieurs avantages:

• modulaire Vous avez juste besoin d'ajouter les plugins et fonctions requis pour votre projet.
• Les préprocesseurs légers légers deviennent de plus en plus grands et complexes. Vous ne voudrez peut-être pas ou n'utilisez pas toutes les fonctionnalités, mais elles existent toujours. PostCSS réduit le volume.
• Implémentation instantanée Avez-vous déjà attendu que certaines fonctionnalités soient disponibles en SASS, libsass, moins, stylet ou autres préprocesseurs? Vous pouvez utiliser maintenant ...
• Fonctions JavaScript Votre préprocesseur CSS utilise JavaScript - un véritable langage de programmation (bien que certains le disent!). La plupart des structures de langage préprocesseur sont basiques. Vous voyez souvent des fonctions et des mélanges plus complexes et difficiles à comprendre que les CSS d'origine qu'ils créent. Avec PostCSS, vous pouvez facilement ouvrir des fichiers, lire à partir des bases de données, émettre des demandes HTTP ou effectuer des calculs complexes.
• Appliquer les stratégies de développement Supposons que vous souhaitiez que votre équipe évite d'utiliser des instructions @Extend. À moins qu'ils ne ajoutent un plugin Extende au processus de construction, @Extend ne sera disponible pour personne. Ce sera immédiatement évident.
• C'est rapide - très rapide L'auteur estime que POSTCSS est 4 à 40 fois plus rapide que les préprocesseurs équivalents. Si seulement quelques plugins étaient nécessaires, je pense que les avantages seraient plus élevés. La solution entière est construite en JavaScript et n'a pas besoin de passer à un autre interprète de bibliothèque ou de langue.

Inconvénients

donc tout va bien? Malheureusement, PostCSS n'est pas la solution parfaite:

• Une complexité accrue Votre processus de construction deviendra plus difficile à gérer. L'ajout de SASS est généralement une ligne ou deux de code, mais PostCSS nécessite plus de planification - d'autant plus que les plugins doivent être appelés dans un ordre spécifique. Par exemple, @Import Inline doit être analysé avant d'analyser la variable. Mais que se passe-t-il si votre déclaration @Import contient des variables? Dans certains cas, il peut être nécessaire d'appeler le plugin plusieurs fois.
• Syntaxe différente J'ai initialement essayé de convertir un petit projet SASS en PostCSS. ne l'essayez même pas! Bien que j'ai fini par réussir, les plugins PostCSS utilisent souvent des syntaxes légèrement différentes comme @ define-mixin au lieu de @Mixin. Cela peut conduire à l'obscurcissement et à de nombreuses mises à jour de code. Une partie de la raison en est ...
• POSTCSS nécessite un CSS valide La plupart des fichiers de texte brut d'analyse, de sorte que toute syntaxe est théoriquement possible. PostCSS crée un modèle d'objet, il nécessite donc des CSS corrects syntaxiquement depuis le début. Même A // un commentaire à ligne unique peut le faire échouer. Vous pouvez prétraiter vos fichiers CSS avant de les transmettre à PostCSS, mais vous de retour à l'utilisation du préprocesseur!

devriez-vous abandonner votre préprocesseur?

Si vous démarrez un petit projet autonome relativement simple dans une seule équipe, un processeur PostCSS personnalisé peut être une option attrayante. Je recommande également PostCSS pour toutes les tâches réelles post-traitement telles que le préfixe du fournisseur, l'emballage des requêtes multimédias dans une seule déclaration, la réduction des équations CALC (), la sauvegarde pour les anciennes applications du navigateur, la prise en charge des sélecteurs CSS4, le rétrécissement, etc. Il n'y a aucun avantage à effectuer ces tâches vous-même. Cependant, Sass a atteint la masse critique. Aucune syntaxe de préprocesseur n'est parfaite, mais elle sera comprise par la plupart des développeurs de votre équipe. Il est peu probable que toute différence subtile offre des avantages importants ou des appels à tout le monde. Autrement dit, les cadres de reprise POSTCSS et similaires ont un grand potentiel. Si un système de plug-in CSS modulaire peut reproduire - ou même mélanger - la syntaxe et les fonctionnalités de Sass, moins et stylet que nous voulons, nous aurons un préprocesseur qui peut battre tous les autres ustensiles de préprocesseurs. Vous pouvez parier que quelqu'un développe ce projet maintenant ...

Avez-vous réussi à utiliser PostCSS comme préprocesseur pour votre projet? Cela vous attire-t-il loin de Sass? Allez-vous migrer de moins? Allez-vous abandonner le stylet?

FAQ sur PostCSS

Quelle est la principale différence entre PostCSS et d'autres préprocesseurs CSS?

POSTCSS est un outil qui utilise le plugin JavaScript pour convertir les styles. Ces plugins peuvent effectuer diverses tâches telles que le tri de code, l'ajout de préfixes de fournisseurs et même d'activer les futures capacités CSS. Contrairement à d'autres préprocesseurs CSS comme SASS ou moins, PostCSS n'a pas de syntaxe intégrée. Au lieu de cela, il utilise des plugins pour convertir CSS. Cela le rend plus flexible et personnalisable car vous pouvez sélectionner uniquement les plugins dont vous avez besoin pour votre projet.

Comment installer et utiliser PostCSS?

Pour installer PostCSS, vous devez installer Node.js et NPM sur votre ordinateur. Ensuite, vous pouvez installer POSTCSS globalement à l'aide de la commande

. Pour utiliser PostCSS, vous devez installer le plugin que vous souhaitez utiliser, puis créer un fichier de configuration qui spécifie le plugin que vous souhaitez utiliser. Ensuite, vous pouvez exécuter PostCSS sur votre fichier CSS à l'aide de la commande npm install -g postcss-cli. postcss input.css -o output.css

Quels sont les plugins PostCSS populaires?

Il existe de nombreux plugins PostCSS disponibles, chacun avec un objectif différent. Certains plugins populaires incluent AutopRefixer, qui ajoute automatiquement les préfixes des fournisseurs à votre CSS;

Puis-je utiliser POSTCSS avec d'autres préprocesseurs CSS?

Oui, vous pouvez utiliser POSTCSS avec d'autres préprocesseurs CSS comme SASS ou moins. Cela vous permet de profiter des capacités de ces préprocesseurs tout en bénéficiant de la flexibilité et de la puissance de PostCSS.

Quels sont les avantages de l'utilisation de PostCSS?

POSTCSS offre de nombreux avantages. Il est hautement personnalisable, vous permettant de sélectionner uniquement les plugins souhaités. Cela peut conduire à un processus de construction plus petit et plus rapide. PostCSS vous permet également d'utiliser les futures fonctionnalités CSS aujourd'hui, et il ajoute automatiquement des préfixes de fournisseurs à votre CSS, vous faisant gagner du temps et garantir que votre style fonctionne correctement dans différents navigateurs.

Quels sont les inconvénients de l'utilisation de PostCSS?

Bien que PostCSS soit puissant et flexible, sa courbe d'apprentissage peut être plus raide que les autres préprocesseurs CSS. Parce qu'il s'appuie sur des plugins, vous devez passer du temps à rechercher et à choisir le bon plugin pour votre projet. De plus, comme il s'agit d'un outil plus récent, il peut ne pas être aussi largement pris en charge ou adopté que d'autres préprocesseurs.

Comment le POSTCSS gère-t-il le mixin?

POSTCSS gère le mélange via le plugin PostCSS-MIXINS. Ce plugin vous permet de définir et d'utiliser des mélanges dans CSS, similaire à ce que vous faites dans SASS ou moins. Vous pouvez définir un mixin dans le fichier de configuration PostCSS et l'utiliser dans votre CSS à l'aide du mot-clé @mixin.

Puis-je utiliser PostCSS dans mon projet existant?

Oui, vous pouvez intégrer PostCSS dans vos projets existants. Il vous suffit d'installer PostCSS et le plugin que vous souhaitez utiliser, puis configurer un fichier de configuration PostCSS. Vous pouvez ensuite exécuter PostCSS sur le fichier CSS existant.

Comment PostCSS se compare-t-il à d'autres outils comme AutopRefixer ou CSSNext?

Autoprefixer et CSSNext sont en fait des plugins PostCSS. Cela signifie que ce sont des outils qui fonctionnent au-dessus de PostCSS, en tirant parti de son architecture plug-in. AutopRefixer ajoute un préfixe de fournisseur à votre CSS, tandis que CSSNext vous permet d'utiliser les futures fonctionnalités CSS aujourd'hui.

PostCSS convient-il aux grands projets?

Oui, PostCSS convient aux projets de toute taille. Parce qu'il est personnalisable, vous ne pouvez sélectionner que les plugins que vous souhaitez, permettant un processus de construction plus petit et plus rapide. Cela en fait un bon choix pour les grands projets où la performance est un problème.

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!