Share
Dans les deux derniers tutoriels, nous avons étudié différentes manières d’utiliser PreCSS sur des feuilles de style complètes afin d’améliorer la compatibilité et l’optimisation de leurs navigateurs sur plusieurs navigateurs. poster-processeur. Dans ce tutoriel, vous apprendrez à utiliser PostCSS en tant que pré-processeur, de la même manière que vous utiliseriez Stylus, Sass ou LESS.
Il existe deux manières principales d’utiliser PostCSS pour le prétraitement. L'une consiste à sélectionner tous vos propres plugins pour ajouter la fonctionnalité de préprocesseur souhaitée, et l'autre à installer un pack de plugins présélectionnés afin d'être prêt à partir tout de suite..
Nous allons commencer par l’approche la plus rapide et la plus simple, en installant l’excellent pack de plugins PreCSS, créé par Jonathan Neal. Dans le tutoriel qui suit, nous verrons comment assembler votre propre préprocesseur, en utilisant uniquement les fonctionnalités souhaitées..
Ce didacticiel suppose que vous maîtrisez un peu les fonctionnalités couramment utilisées dans les pré-processeurs tels que Stylus, Sass ou LESS. C'est simplement parce que nous allons nous concentrer sur Comment vous pouvez utiliser ces mêmes types de fonctionnalités via PostCSS plutôt que quoi les fonctionnalités font réellement. Cela dit, même si vous n'avez jamais utilisé de préprocesseur auparavant, c'est peut-être l'endroit idéal pour commencer.
Nous verrons comment installer un projet Gulp ou Grunt à l'aide de PreCSS dans la section suivante. Toutefois, si vous souhaitez utiliser un raccourci (juste pour le moment), vous pouvez également utiliser le terrain de démonstration en direct pour essayer le code. nous allons parcourir dans ce tutoriel. Le code peut être saisi dans la fenêtre de gauche. Il sera automatiquement compilé et affiché dans la fenêtre de droite..
PreCSS Live Editor: https://jonathantneal.github.io/precssLa 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 commandenpm installer.
Que vous utilisiez Gulp ou Grunt, installez PreCSS dans votre projet à l’aide de la commande suivante:
npm install precss --save-dev
Si vous utilisez Gulp, ajoutez cette variable sous les variables déjà présentes dans le fichier:
Accentsconagua
var precss = require ('precss');Maintenant, ajoutez le nouveau nom de variable dans votre processeurs tableau:
processeurs var = [precss];
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
processeurs: [require ('precss') ()]Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande grunt postcss puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Vous avez maintenant tout ce dont vous avez besoin pour utiliser PreCSS installé et prêt à fonctionner. Cela signifie que nous sommes prêts à commencer à explorer certaines des capacités de pré-traitement de PreCSS et comment les utiliser..
De manière générale, la syntaxe PreCSS est très similaire à celle de Sass. Cependant, il utilise certaines de ses propres approches uniques, que nous couvrirons au fur et à mesure..
Remarque: en raison de la syntaxe de PreCSS, semblable à Sass, vous verrez qu'un surligneur de syntaxe Sass fonctionnera mieux pour vous dans votre éditeur de texte favori.
L'imbrication est quelque chose de commun aux trois principaux préprocesseurs, à savoir Stylus, Sass et LESS, et il est également présent dans PreCSS. L'imbrication dans PreCSS s'effectue de la même manière que dans Sass et LESS, en plaçant les sélecteurs à l'intérieur des accolades des autres sélecteurs..
La possibilité d'utiliser le Et Le symbole permettant de dupliquer le sélecteur parent dans le sélecteur enfant fonctionne également de la même manière dans PreCSS et dans les autres préprocesseurs..
Essayez d’ajouter le code imbriqué suivant à votre fichier «src / style.css»:
.menu width: 100%; une text-decoration: none; & :: before content: ";
Compilez votre CSS avec gulp css ou grunt postcss et votre fichier “dest / style.css” aurait dû évaluer le code imbriqué comme suit:
.menu width: 100%; .menu a text-decoration: none; .menu :: before content: ";
Les variables constituent un autre type de fonctionnalité commune à tous les préprocesseurs. Elles sont incluses dans PreCSS. La seule chose qui diffère généralement entre chaque préprocesseur est la syntaxe pour désigner les variables.
@ symbole et place un : avant la valeur. $ symbole et place un = signer avant la valeur. $ symbole et place un : avant la valeur.Conformément à la tendance de PreCSS à utiliser la syntaxe similaire à Sass, elle place également $ avant le nom de la variable et un : avant la valeur.
Essayez d’utiliser des variables PreCSS en l’ajoutant à votre fichier «src / style.css»:
$ text_color: # 232323; body color: $ text_color;
Après recompilation, vous devriez voir ce code résultant:
corps color: # 232323;
Conditions, c'est-à-dire. si et autre logique, sont une caractéristique qui est très forte à la fois dans Sass et Stylus. LESS propose des mixins protégés, mais ils n'offrent pas le même degré de puissance. Les conditions sont présentes dans PreCSS et suivent la même syntaxe que Sass, en utilisant @si et @autre.
Ajoutez cet exemple de code à votre fichier «src / style.css»:
$ column_layout: 2; .column @if $ column_layout == 2 width: 50%; float: gauche; @else width: 100%;
Dans l'exemple ci-dessus, nous avons un .colonne la sortie de la classe différemment selon que nous voulons une mise en page à une colonne ou à deux colonnes Nous avons le $ column_layout variable définie à 2, ce qui signifie que nous devrions voir largeur: 50%; float: gauche; sortie dans notre classe.
Compilez votre fichier et vous devriez voir ce qui suit dans votre fichier “dest / style.css”.
.colonne largeur: 50%; float: left
Remarque: le plugin postcss-advanced-variables qui fournit cette fonctionnalité de conditions est encore relativement nouveau, et j’ai rencontré des résultats inattendus lorsqu’on l’utilisais pour des conditions plus complexes..
Il existe un plug-in alternatif qui peut être utilisé pour les conditions nommées postcss-conditionals. Nous verrons comment vous pouvez utiliser ce plugin (si vous le souhaitez) dans le prochain tutoriel, "Faire rouler votre propre préprocesseur"..
@pour et @chaque Il existe deux types de boucles disponibles dans PreCSS, le @pour et @chaque boucles. Les deux utilisent une approche qui ressemble à Sass. Les boucles «For» vous permettent de faire défiler un compteur numérique, tandis que les boucles «chaque» vous permettent de parcourir une liste d'éléments..
@pour BouclesDans un @pour Dans la boucle, il existe une variable "compteur" qui permet de savoir où vous en êtes dans votre compteur numérique, généralement définie comme suit: $ i. Par exemple, pour une itération de 1 à 3, il y aura trois boucles; en premier $ i sera égal 1, la seconde il sera égal 2 et le troisième, il sera égal 3.
Ce $ i La variable compteur peut être interpolée à la fois dans les sélecteurs et les règles, ce qui peut être très pratique pour des tâches telles que la génération nième de type () règles et calcul des largeurs.
Ajoutez ce code à votre fichier «src / style.css» pour essayer un @pour boucle:
@pour $ i de 1 à 3 p: nième de type ($ i) marge gauche: calc (100% / $ i);
Après la compilation, vous devriez voir ce code étendu à:
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);
Remarque: Nombres 1, 2 et 3 ont été insérés dans chacun des styles ci-dessus.
@chaque BouclesUn @chaque la boucle parcourt une liste d'éléments au lieu de nombres. Comme avec @pour boucles, la variable représentant l’élément en cours de la boucle peut être interpolée en sélecteurs et en règles. Notez que pour interpoler une chaîne, vous devez insérer un ensemble de crochets dans le nom de la variable au format. $ (var).
Donner en utilisant PreCSS @chaque boucle un tour en ajoutant l'exemple de code suivant:
$ social: twitter, facebook, youtube; @each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Après la compilation, vous devriez voir que le CSS suivant a été généré:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); La syntaxe pour la création de mixin est un aspect de PreCSS un peu différent de Sass.
Dans Sass, pour définir un mixin, utilisez la syntaxe @mixin mixin_name ($ arg1, $ arg2) … et ensuite l'utiliser avec @include mixin_name (pass_arg1, pass_arg2);.
Dans PreCSS, par contre, vous définissez un mixin avec la syntaxe @ define-mixin mixin_name $ arg1, $ arg2 … et l'utiliser avec @mixin mixin_name pass_arg1, pass_arg2;.
Ajoutez cet exemple à 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; @mixin icon youtube, red;Lors de la compilation, vous devriez voir:
.button.twitter background-image: url ('img / twitter.png'); couleur de fond: bleu; .button.youtube background-image: url ('img / youtube.png'); couleur de fond: rouge; Remarque: les arguments passés par le mixin peuvent être interpolés en sélecteurs et chaînes avec la même approche que celle mentionnée dans @chaque boucles ci-dessus; avec le format $ (var).
En plus d'utiliser les mixins de la manière indiquée ci-dessus, ils peuvent également être configurés pour consommer des blocs de contenu transmis lors de l'appel du mixin. C'est essentiellement le même processus qu'avec Sass ' @contenu.
Par exemple, modifiez le mixin de l’exemple ci-dessus en plaçant @ mixin-content où vous voulez qu'un bloc de contenu passé apparaisse, comme ceci:
icône @ define-mixin $ réseau, $ couleur . Button. $ (réseau) image-fond: url ('img / $ (réseau) .png'); couleur de fond: $ color; @ mixin-content; Quand un mixin incorporant @ mixin-content est utilisé, il doit être placé entre accolades plutôt que sur une seule ligne se terminant par un ;, ou il échouera à compiler.
Mettez à jour votre code pour que vos appels de mixin ressemblent à ceci:
@mixin icon twitter, blue width: 3rem; @mixin icon youtube, red width: 4rem;
Après compilation, cela devrait donner le code suivant - notez l’inclusion de la largeur contenu passé à chaque utilisation du mixin:
.button.twitter background-image: url ('img / twitter.png'); couleur de fond: bleu; largeur: 3rem; .button.youtube background-image: url ('img / youtube.png'); couleur de fond: rouge; largeur: 4rem; Les extensions sont similaires aux mixins en ce sens qu'elles sont conçues pour vous permettre de réutiliser des blocs de code. Cependant, l’idée derrière «extend» est de créer un ensemble de code de base que vous savez utiliser exactement de la même manière plusieurs fois pour un certain type d’élément. Vous pouvez ensuite étendre ultérieurement cette base avec du code supplémentaire, autre que celui par défaut..
Dans PreCSS, la syntaxe permettant de définir une extension est la suivante: @ define-extend extend_name ….
Dans votre fichier “src / style.css”, définissez une extension contenant les styles de base d'un bouton arrondi, comme ceci:
@ define-extend rounded_button border-radius: 0.5rem; rembourrage: 1em; largeur de la bordure: 0,0625 rem; style de bordure: solide;
Cet ensemble de styles par défaut est maintenant prêt à être étendu avec du code supplémentaire, par exemple, en définissant des paramètres tels que Couleur de fond et couleur de la bordure. Ceci est fait en utilisant la syntaxe @extend nom_extension; importer les styles de base définis dans l'extension.
Ajoutez cet exemple de code, sous le code que vous venez d'ajouter:
.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;
Où le @extend rounded_button; la ligne est utilisée, tout le contenu de l’extension sera inséré.
Compilez vos styles et vous devriez obtenir:
.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;
Notez également que les styles communs à la .blue_button et .bouton rouge la classe ont été combinées pour l'efficacité.
Le plugin utilisé pour insérer des feuilles de style via @importation est le même que celui que nous avons présenté dans le didacticiel précédent de cette série: Pour la minification et l’optimisation. Pour en savoir plus sur son fonctionnement, lisez la section intitulée «Fichiers en ligne / combinés avec @import»..
Dans le contexte de l'utilisation de PostCSS en tant que pré-processeur, les importations deviennent encore plus utiles car elles vous permettent de configurer des partiels, ce à quoi vous pourriez être habitué depuis d'autres solutions de pré-traitement. Par exemple, vous pouvez configurer un dossier «partiels», séparer votre projet en fichiers partiels logiquement discrets, puis les importer comme suit:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
J'espère que vous avez maintenant quelques idées sur la puissance de PostCSS en tant que pré-processeur grâce au pack PreCSS. Pour résumer ce que nous avons couvert ci-dessus:
@ define-mixin mixin_name $ arg1, $ arg2 … @mixin mixin_name pass_arg1, pass_arg2; @ mixin-content peut être utilisé de la même manière que Sass ' @contenu @ define-extend extend_name …@extend nom_extension;@importation fichiers CSS externes intégrés, particulièrement utiles pour l'utilisation de partielsPreCSS est un projet fantastique, qui rassemble d'excellents plug-ins d'extension de langage et rend le pré-traitement basé sur PostCSS plus ou moins plug-and-play. Il fournit la quasi-totalité des fonctionnalités attendues par la plupart des utilisateurs de préprocesseurs et constitue un moyen rapide et simple de faire rouler le préprocesseur PostCSS..
L'utilisation de PreCSS est l'une des deux méthodes de prétraitement PostCSS mentionnées au début de ce didacticiel. L’autre méthode consiste à configurer votre posséder préprocesseur, sélectionnant à la main les plug-ins d'extension de langue qui conviennent à vos propres projets ou style de codage. Le compromis, c'est un peu plus de configuration, mais en retour, vous avez la liberté de créer un préprocesseur qui fonctionne comme vous le souhaitez..
Vous apprendrez comment faire cela dans le prochain tutoriel, "Faites rouler votre pré-processeur"..
