Share
Dans le tutoriel précédent, nous avons expliqué comment utiliser l'excellent pack de pré-traitement «PreCSS». Dans ce tutoriel, nous aborderons le pré-traitement basé sur PostCSS d'une manière différente. installer une sélection de plug-ins triés sur le volet pour personnaliser notre préprocesseur à partir de zéro.
Je vais vous expliquer la configuration de ce que je personnellement trouver pour être un grand mélange de plugins d'extension de langue. Mais lorsque vous lancez votre propre préprocesseur, vous pouvez choisir de n'utiliser que certains des plugins que nous couvrons ici, ou bien de ne rien choisir du tout, au lieu de choisir d'autres options..
C'est la beauté de ce processus. vous pouvez configurer votre préprocesseur comme bon vous semble. Le but de ce tutoriel sera de vous donner une expérience pratique de la construction d’un préprocesseur PostCSS et de vous expliquer les fonctionnalités des plugins actuellement disponibles afin que vous puissiez choisir vous-même le type d’utilisation que vous souhaitez utiliser..
Commençons!
La première chose à faire est de configurer votre projet pour qu’il utilise Gulp ou Grunt, selon vos préférences. Si vous n'avez pas encore de préférence pour l'un ou l'autre, je vous recommande d'utiliser Gulp car vous aurez besoin de moins de code pour atteindre les mêmes objectifs..
Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
respectivement.
Si vous ne souhaitez pas configurer manuellement votre projet à partir de rien, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage fourni Gulp ou Grunt dans un dossier de projet vide..
Ensuite, avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Ce tutoriel supposera que vous avez suivi les entrées précédentes de la série et que vous sachiez maintenant comment installer un plugin dans votre projet et le charger via votre fichier Gulpfile ou Gruntfile..
Important! Au fur et à mesure, assurez-vous de charger les plugins dans votre Gulpfile / Gruntfile dans l’ordre que vous voyez dans ce tutoriel; L'ordre de chargement est important dans PostCSS pour que tout fonctionne correctement.
Le tout premier endroit où nous allons commencer par assembler notre préprocesseur personnalisé est l’importation. Vous avez déjà vu PostCSS en ligne de @importation feuilles de style des didacticiels précédents sur la minimisation, l'optimisation et le prétraitement avec PreCSS. La manière dont les importations seront utilisées dans ce pré-processeur n’est pas différente.
Nous venons d'évoquer le fait que l'ordre de chargement est important dans PostCSS, et nous en trouvons ici le premier exemple. Nous voulons nous assurer que tous @importation les fichiers sont en ligne dès la première étape, de sorte que nous ayons tout le code de notre projet au même endroit pour que le reste de nos plugins fonctionne.
Par exemple, nous pourrions stocker toutes nos variables dans un fichier partiel et utiliser @importation d'apporter cela partiel dans notre feuille de style principale. Si nous n'avons pas exécuté le plugin qui est intégré @importation les fichiers d’abord, nos variables ne seraient pas importées et ne seraient donc pas disponibles pour le reste de notre traitement..
Parce que nous allons commencer à importer des partiels, nous voulons apporter un petit ajustement à notre fichier Gulp avant d'ajouter notre fonctionnalité d'importation..
Remarque: si vous utilisez Grunt, vous n'avez pas besoin de faire de changement à ce stade.
À l'heure actuelle, tous les fichiers «.css» trouvés dans le dossier «src» sont compilés, mais nous ne souhaitons pas compiler accidentellement des fichiers partiels. Nous allons tout importer dans notre fichier “style.css”, donc c'est le seul à compiler..
Trouvez cette ligne:
Accentsconagua
retourne gulp.src ('./ src / *. css')… Et changez le en:
return gulp.src ('./ src / style.css')C’est le même plugin que nous avons utilisé dans le didacticiel «Pour la minification et l’optimisation», qui est également utilisé dans PreCSS, vous en serez donc quelque peu familier maintenant..
Installez le plugin dans votre projet, puis dans votre dossier «src», créez un fichier nommé «_vars.css» et ajoutez-y du code de test de base. Notez que nous n'avons pas encore ajouté de fonctionnalité de variables, donc quelques CSS simples, par exemple:
.test fond: noir;
Importez maintenant votre nouveau fichier de variables dans votre fichier principal «src / style.css» en ajoutant ce code à la première ligne:
@import "_vars";
Compilez votre code, puis vérifiez votre fichier «dest / style.css» et vous devriez voir qu'il contient maintenant le code de votre fichier «_vars.css»..
Remarque: ce plugin doit être exécuté avant les plugins postcss-nested et postcss-simple-vars, que nous utiliserons tous les deux.
Allez-y, installez postcss-mixins, puis ajoutez le code suivant à votre fichier «src / style.css»:
icône @ define-mixin $ réseau, $ couleur . Button. $ (réseau) image-fond: url ('img / $ (réseau) .png'); couleur de fond: $ color; @mixin icon twitter, blue;Après la compilation, le code compilé suivant doit être ajouté à votre “dest / style.css”:
.button.twitter background-image: url ('img / twitter.png'); couleur de fond: bleu; Le plugin postcss-mixins que nous utilisons ici est le même que celui utilisé dans PreCSS. Nous avons expliqué comment l’utiliser dans le didacticiel sur PreCSS. Pour plus de détails sur sa syntaxe, consultez la section «Mixins» du didacticiel précédent..
Si vous préférez utiliser la syntaxe Sass lors de la création de mixins, consultez le plugin postcss-sassy-mixins d'Andy Jansson, qui fonctionne de la même manière que postcss-mixins mais avec la syntaxe. @mixin définir un mixin, et @comprendre en utiliser un.
Remarque: le plugin postcss-for en est un autre qui doit être exécuté avant postcss-imbriqué et postcss-simple-vars.
Installez le plugin postcss-for, puis testez-le comme prévu en ajoutant ce code à votre fichier «src / style.css»:
@pour $ i de 1 à 3 p: nième de type ($ i) marge gauche: calc (100% / $ i);
Il devrait compiler pour vous donner:
p: nième de type (1) marge gauche: calc (100% / 1); p: nième de type (2) marge gauche: calc (100% / 2); p: nième de type (3) marge gauche: calc (100% / 3);
Encore une fois, le plugin que nous utilisons pour ajouter @pour Loops est identique à celui utilisé dans PreCSS. Pour plus d'informations sur sa syntaxe, consultez la section "Loops" du didacticiel précédent..
Le plug-in postcss-for doit être exécuté avant postcss-simple-vars, ce qui signifie qu'il n'y a aucun moyen d'utiliser des variables pour définir la plage souhaitée. @pour boucle pour parcourir.
Si cela pose un problème, vous pouvez utiliser ce fork du plug-in postcss-for qui devrait plutôt être chargé. après les plugins postcss-simple-vars.
Comme il s’exécute après l’évaluation des variables, vous êtes libre d’utiliser des variables pour définir la plage de votre choix. @pour boucle pour parcourir, comme ceci:
@À partir de 1; @count: 3; @for $ i de @fr à @count p: nième de type ($ i) marge gauche: calc (100% / $ i);
Nous allons ajouter deux types de variables à notre préprocesseur, ce qui peut être très pratique. Le premier type utilise la syntaxe de type Sass et le second utilise la syntaxe des propriétés personnalisées CSS, également appelées variables CSS.
Installez ces deux plugins, nous testerons chacun à la fois.
Premièrement, nous allons tester la syntaxe de type Sass de postcss-simple-vars. Ouvrez le fichier “_vars.css” que vous avez créé précédemment, supprimez son contenu et ajoutez le code suivant:
$ default_padding: 1rem;
Ajoutez ce qui suit dans votre fichier «src / style.css» et recompilez:
.post padding: $ default_padding;
Il devrait compiler pour vous donner:
.post padding: 1rem;
Nous allons maintenant tester les propriétés personnalisées CSS, telles que la syntaxe de postcss-css-variables. Ajoutez le code suivant à votre fichier “src / style.css”:
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (largeur maximale: 75rem) h1 --h1_font_size: 4vw;
Il devrait compiler dans:
h1 taille de la police: 3rem; @media (largeur maximale: 75rem) h1 taille de la police: 4vw;
Notez que lorsqu’on utilisait des variables CSS, il suffisait de changer la valeur du --h1_font_size variable à l'intérieur de la requête multimédia et il génère automatiquement les données associées. taille de police propriété. C'est une fonctionnalité particulièrement utile.
Avant de continuer, je mentionnerai brièvement à nouveau que l’approche adoptée dans ce tutoriel n’est pas celle que vous envisagez. avoir prendre. Si vous voulez utiliser un type de variable et non l'autre, c'est très bien.
De mon point de vue, la raison pour laquelle j'aime utiliser les deux types de variables est que je les utilise de deux manières différentes. J'utilise généralement la syntaxe des propriétés personnalisées CSS dans ma feuille de style principale, tandis que j'utilise des variables de type Sass dans mes fichiers partiels.
Cela me permet de définir des propriétés personnalisées CSS pour le type de variables que je pourrais réellement utiliser dans un projet réel si / quand elles deviennent bien prises en charge sur tous les navigateurs. Comme vous l'avez vu dans l'exemple ci-dessus, ils ont également certaines fonctionnalités que les variables de type Sass ne.
En attendant, je peux utiliser des variables de type Sass pour des éléments n'appartenant pas à une feuille de style dynamique, en particulier ceux qui existent uniquement pour être traités via des éléments tels que chaque boucle, condition et autres transformations..
Au lieu d'utiliser postcss-simple-vars, vous pouvez envisager d'utiliser postcss-advanced-variables, le plug-in utilisé dans le cadre du pack PreCSS..
C’est aussi une excellente option, la principale différence étant qu’il gère les conditions, les boucles et les variables dans le même plugin. Pour moi, la raison pour laquelle je choisis actuellement postcss-simple-vars est que je préfère avoir des conditionnels provenant d'un plugin séparé; postcss-conditionals que nous allons couvrir sous peu.
Au lieu d'utiliser postcss-css-variables, vous préférerez peut-être postcss-custom-properties.
La différence essentielle entre les deux est que postcss-custom-properties est strictement conforme à la spécification W3C relative aux propriétés personnalisées. Vous pouvez donc être sûr que vous n'écrivez que les futures CSS correctes. D'autre part, postcss-css-variables offre des fonctionnalités supplémentaires, mais ce faisant, il ne prétend pas avoir une parité complète avec spec.
Personnellement, j'ai choisi postcss-css-variables car je l'utilise dans le contexte du prétraitement, où j'écris beaucoup de code non-spécifiant de toute façon. En tant que tel, je préférerais que la fonctionnalité ajoutée dépasse 100% la conformité aux spécifications.
Cependant, si vous utilisez des variables dans le contexte de l'écriture de futures CSS, vous trouverez peut-être que postcss-custom-properties vous convient mieux..
Installez le plugin postcss-each puis ajoutez ce code de variable à votre fichier “_vars.css”:
$ social: twitter, facebook, youtube;
Ce code définit une liste, stockée dans le répertoire $ social variable.
Maintenant, nous allons créer un @chaque boucle pour parcourir les valeurs stockées dans notre $ social variable. Ajoutez ce code à votre fichier “src / style.css”:
@each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Notre @chaque La boucle est maintenant prête, mais avant que nous puissions la compiler, nous devons faire un petit changement de configuration dans les options de postcss-simple-vars..
Vous remarquerez que dans le code ci-dessus, nous utilisons icône $ pour représenter la valeur actuelle que nous parcourons. Ceci peut poser quelques difficultés car le plugin postcss-simple-vars recherche le $ signer pour identifier les variables.
Cela signifie qu'il va voir icône $, pense que c'est une variable, essayez de la traiter, puis voyez qu'elle n'a pas de valeur. Cela le fera arrêter de compiler et enregistrer une erreur sur la console qu'il a découvert une variable indéfinie.
Pour résoudre ce problème, nous voulons ajouter l'option silencieux: vrai à nos options pour le plugin. Cela signifie que s'il découvre une variable non définie, il n'arrêtera pas la compilation pour enregistrer une erreur, il continuera simplement. Par conséquent, il ne sera pas dérangé par la présence icône $ dans notre @chaque boucle et nous serons en mesure de compiler avec succès.
Dans le tableau de processeurs de votre fichier Gulpfile ou Gruntfile, définissez l'option suivante:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / require ('postcss-simple-vars') (silent: true)Maintenant, compilez votre CSS et vous devriez obtenir:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Comme mentionné précédemment, postcss-advanced-variables est une autre excellente option de plug-in qui gère les variables, les boucles et les conditions tout en un..
J'ai mentionné précédemment que ce plugin était ma préférence pour le traitement des conditions. C'est parce que j'ai constaté qu'il est capable de gérer des contrôles conditionnels plus complexes. Il comprend un soutien pour @else si syntaxe, ce qui signifie que vous pouvez tester plusieurs conditions dans un seul morceau de code.
Après avoir installé le plugin postcss-conditionals, testez-le en ajoutant ce code dans votre fichier «src / style.css»:
$ column_count: 3; .column @if $ column_count == 3 width: 33%; float: gauche; @else if $ column_count == 2 width: 50%; float: gauche; @else width: 100%;
Ce code vérifiera la valeur que nous avons définie dans la variable @column_count et affichera des valeurs de largeur et de flotteur différentes en fonction de ce qu’il trouve. Cela fonctionne de la même manière que le code que nous avons utilisé dans le précédent tutoriel de prétraitement, mais maintenant que nous avons la possibilité de l’utiliser. @else si les lignes que nous avons pu augmenter le nombre de conditions que nous testons de deux à trois.
Après recompilation, cela devrait vous donner:
.colonne largeur: 33%; float: left
Essayez de changer $ column_count à 2 ou 1 et compiler à nouveau pour voir comment cela change la sortie CSS.
Nous pouvons également utiliser ces types de conditionnels bien à l’intérieur des mixins, pour lesquels nous avons précédemment ajouté le support. Par exemple, nous pouvons créer un mixin pour générer le code de disposition de colonne comme ceci:
@ define-mixin columns $ count @if $ count == 3 width: 33%; float: gauche; @else if $ count == 2 width: 50%; float: gauche; @else width: 100%; .another_column @mixin columns 2;
Cela vous donnera la sortie:
.autre_colonne largeur: 50%; float: gauche;
Comme mentionné précédemment, postcss-advanced-variables est une autre excellente option de plug-in qui gère les variables, les boucles et les conditions tout en un..
Dans un précédent tutoriel, nous utilisions postcss-calc, via cssnano, pour aider à créer des instances de calc () utiliser plus efficace. Dans le contexte du prétraitement, cependant, cela peut être très utile partout où nous voudrions utiliser les mathématiques dans nos feuilles de style..
Allez-y et installez postcss-calc, ensuite nous allons le tester en rendant plus efficace le mixin de génération de colonnes ajouté ci-dessus.
En ce moment, nous utilisons des conditionnels pour vérifier si le mixin $ compte l'argument est défini sur 1, 2 ou 3 puis émettre une largeur précalculée correspondante. Au lieu de cela, nous allons utiliser calc () pour générer automatiquement la bonne largeur pour notre code de colonne, quel que soit le nombre passé par le mixin.
Ajoutez à votre fichier “src / style.css”:
@ define-mixin columns_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin columns_calc 2;
Au lieu de coder en dur les pourcentages de largeur dont nous aurions besoin pour certains nombres de colonnes, nous le calculons maintenant à la volée.
Le plugin postcss-calc convertira width: calc (100% / $ count); en une quantité statique en fonction de la valeur passée lorsque nous appelons le mixin, dans ce cas 2.
Recompilez votre code et vous devriez voir cette sortie:
.column_calculated width: 50%; float: gauche;
Remarque: Partout où postcss-calc peut résoudre calc () à une valeur statique, il sera affiché dans votre code. Si cela ne peut pas, cela ne changera rien, vous pouvez donc toujours utiliser calc () pour les valeurs devant être gérées par le navigateur lors de l'exécution.
Pour l'imbrication, nous utilisons le même plugin que celui utilisé dans le pack PreCSS. Vous pouvez donc vous reporter au didacticiel précédent pour obtenir des informations complètes sur la syntaxe..
Installez postcss-nested, puis vérifiez que tout fonctionne correctement en compilant ce code:
.menu width: 100%; une text-decoration: none;
Votre CSS résultant devrait être:
.menu width: 100%; .menu a text-decoration: none;
Pour les extensions, nous utiliserons le plugin postcss-sass-extend. Cela nous donnera une syntaxe différente de celle utilisée dans notre précédent tutoriel sur l’utilisation de PreCSS. Au lieu d’être étendu, être défini avec @ define-extend extend_name … ils sont définis avec % extend_name ….
Ils sont toujours utilisés avec essentiellement la même syntaxe de @extend% extend_name;.
Notez que le plugin postcss-sass-extend est livré avec PreCSS, cependant je suppose qu'il ne se charge pas par défaut car lorsque j'ai essayé d'utiliser la syntaxe requise, il n'a pas été compilé..
Après avoir installé postcss-sass-extend dans votre projet, testez-le avec le code suivant:
% rounded_button border-radius: 0.5rem; rembourrage: 1em; largeur de la bordure: 0,0625 rem; style de bordure: solide; .blue_button @extend% rounded_button; couleur de bordure: # 2F74D1; couleur de fond: # 3B8EFF; .red_button @extend% rounded_button; couleur de bordure: # C41A1E; couleur de fond: # FF2025;
Il devrait compiler dans:
.blue_button, .red_button border-radius: 0.5rem; rembourrage: 1em; largeur de la bordure: 0,0625 rem; style de bordure: solide; .blue_button border-color: # 2F74D1; couleur de fond: # 3B8EFF; .red_button border-color: # C41A1E; couleur de fond: # FF2025;
Jusqu'à présent, nous avons couvert ce qui pourrait être considéré comme les fonctionnalités de base communes à la plupart des pré-processeurs. Cependant, il existe encore plus de plugins disponibles pour offrir des fonctionnalités supplémentaires; Certaines de ces fonctionnalités se retrouvent dans d'autres pré-processeurs, et certaines doivent être trouvées dans PostCSS. Nous allons passer en revue ces options supplémentaires brièvement maintenant.
La possibilité de modifier les couleurs peut être l’une des fonctionnalités les plus utiles des pré-processeurs. Il existe en réalité plusieurs plugins de couleur pour PostCSS, mais ce sont trois d'entre eux qui se retrouvent particulièrement à l'aise dans une configuration de prétraitement. Ils permettent diverses transformations de couleur, notamment éclaircissement, assombrissement, saturation, ajout de valeurs alpha et bien plus encore..
Les fonctionnalités offertes par ce plugin pourraient être comparées aux mixins transparents de Stylus, ce qui évite l'utilisation d'une syntaxe telle que @mixin, vous définissez des morceaux de code de telle sorte qu'ils puissent ensuite être utilisés dans le code de la même manière qu'une propriété native, par exemple.
/ * Définir une propriété * / taille: $ taille hauteur: $ taille; largeur: $ taille; / * Utilisez-le comme une propriété native * / .square size: 50px;
Le plugin peut également être utilisé pour redéfinir les propriétés natives en fonction de vos besoins..
La recherche de propriétés est une fonctionnalité trouvée dans Stylus qui peut être très pratique. Il vous permet de rechercher la valeur d'une propriété dans le même style. Par exemple, vous pouvez définir une marge droite pour correspondre à la gauche avec: marge gauche: 20px; margin-right: @ margin-left;
Alors que l'imbrication habituelle que nous avons décrite ci-dessus ouvre les sélecteurs, le plug-in postcss-nested-props ouvre les propriétés imbriquées, par exemple:
/ * Code d'origine * / .element border: width: 1px; style: solide; couleur: #ccc; / * Après traitement * / .element border-width: 1px; style de bordure: solide; couleur de bordure: #ccc;
La correspondance vous offre un autre moyen d'effectuer des vérifications conditionnelles, en utilisant cette fois Rust comme une correspondance de modèle, ce qui revient à changer les instructions en JavaScript ou en PHP. Cela peut vous donner un moyen plus efficace de vérifier plusieurs conditions que d’écrire plusieurs @sinon chèques.
La génération de sprites CSS, une fonctionnalité répandue dans Compass, peut également être réalisée via le plugin postcss-sprites. Le plugin va scanner votre CSS pour les images, les combiner dans une feuille de sprite et mettre à jour votre code si nécessaire afin de s'afficher correctement à partir de la nouvelle feuille de sprite..
Il existe actuellement une liste très complète de plug-ins d'extension de langue parmi lesquels choisir, mais vous pouvez en trouver une plus complète ici: consultez la liste complète à l'adresse: https://github.com/postcss/postcss#language-extensions
Pour de nombreuses personnes, la possibilité d’écrire avec une syntaxe concise et efficace (généralement sans points-virgules ni accolades) est l’un des grands attraits des pré-processeurs tels que Stylus ou Sass. La version 5.0 récemment publiée de PostCSS prend désormais en charge les analyseurs syntaxiques personnalisés qui permettront la prise en charge de nouvelles syntaxes. SugarSS doit être l’analyseur syntaxique abrégé et des discussions sont en cours sur la structure de cette syntaxe..
PostCSS est encore relativement nouveau et vous constaterez peut-être que vous souhaitez réaliser quelque chose avec votre préprocesseur personnalisé pour lequel il n’existe actuellement aucun plugin. La beauté de cet écosystème modulaire réside dans le fait que vous avez la possibilité de résoudre ce problème vous-même en créant votre propre plugin. Tout le monde peut le faire, et la barrière à l'entrée est bien moins importante que si vous essayiez d'ajouter vos propres fonctionnalités à Stylus, Sass ou LESS. Nous allons apprendre comment dans un tutoriel ultérieur.
Vous n'êtes pas obligé de choisir entre PreCSS et de lancer votre propre préprocesseur si vous souhaitez utiliser PostCSS. Si vous le souhaitez, vous pouvez vous retirer complètement de tout prétraitement basé sur PostCSS. Utilisez-le plutôt côte à côte avec votre préprocesseur préféré..
Dans le prochain tutoriel, nous allons apprendre à utiliser PostCSS avec Stylus, Sass ou LESS. On se voit là-bas!
