Share
Bienvenue dans le «Guide de démarrage rapide de PostCSS Deep Dive». Tout au long de ces premiers articles de notre série, nous allons examiner comment vous lancer avec PostCSS de la manière la plus rapide et la plus efficace possible..
Dans ce didacticiel, nous allons commencer avec les options de configuration instantanée. Vous pourrez ainsi utiliser PostCSS en quelques minutes seulement. Nous avons actuellement deux options de configuration instantanée: CodePen et Prepros.
Voyons comment vous pouvez les utiliser tous les deux pour commencer à jouer immédiatement à PostCSS.
Si vous débutez avec PostCSS, le moyen le plus rapide de commencer à l’utiliser est via CodePen..
CodePen a maintenant un support pré-intégré pour PostCSS, avec les plugins et packs suivants:
Cette sélection de plug-ins vous apporte un soutien pour la syntaxe future, les fonctionnalités de type Sass, la suppression de commentaires et la possibilité d'écrire du code de transformation à la sténographie..
Commencez par aller à CodePen et créer un nouveau stylo. Cliquez ensuite sur la petite icône représentant une roue dentée en haut à gauche de la fenêtre CSS pour afficher le panneau des paramètres..
Dans le menu déroulant intitulé Préprocesseur CSS sélectionnez le PostCSS option. Vous pouvez également vérifier le bouton radio intitulé Préfixeur automatique d'avoir ce plugin inclus.
Après avoir fait cette sélection, vous devriez voir un petit bouton noir sous la liste déroulante intitulée Besoin d'un add-on?. Cliquez sur ce bouton et un panneau s'ouvrira, affichant une liste de @ règles. Copier et coller l'un de ces @ règles dans votre panneau CSS pour commencer à utiliser le plugin PostCSS correspondant.
Voyons un exemple d'utilisation des plugins PostCSS disponibles avec CodePen, en commençant par le cssnext pack.
En haut du panneau CSS, ajoutez ce code pour indiquer que vous souhaitez utiliser cssnext:
@use cssnext;
Avec cette ligne en place, vous pourrez désormais utiliser toutes les fonctionnalités décrites à l'adresse http://cssnext.io/features. Nous allons utiliser les variables CSS et les fonctions de couleur pour définir une couleur sur l'arrière-plan du corps..
Tout d'abord, nous installons un :racine section et y définir une variable CSS. Ajoutez ceci à votre panneau CSS:
: root --body_bg_color: noir;
Maintenant, nous pouvons utiliser cette variable dans notre CSS en ajoutant ce code ci-dessous:
body background: var (- body_bg_color);
À ce stade, vous devriez avoir vu le fond de votre stylo virer au noir. Vous pouvez également cliquer sur le Voir compilé bouton en haut de votre panneau CSS pour voir le code qui a été généré:
“View Compiled” montrant le code après traitement avec PostCSSMaintenant, disons que nous trouvons ce noir dur un peu difficile à comprendre pour un dessin sur lequel nous travaillons et que nous voulons l’alléger un peu. Pour ajuster la couleur, nous pouvons utiliser le syntaxe future qui permet la modification de la couleur.
Sur la ligne qui déclare le --body_bg_color variable, change la valeur de noir à:
--body_bg_color: couleur (luminosité noire (20%));
Cette fonction de couleur éclaircit le noir de 20%. Vous devriez maintenant voir que l'arrière-plan de votre stylo a été changé en gris foncé.
Tous les plugins supportés peuvent être utilisés sur CodePen de la même manière:
Accentsconagua
@ règle pour le plugin que vous souhaitez utiliserVoici la démo (visuellement banale) que nous venons de construire:
Prepros n’a peut-être pas la gamme de prise en charge des plugins offerte par CodePen, mais il inclut une activation transparente des deux Préfixeur automatique et cssnext. Les versions préliminaires peuvent être téléchargées à partir de https://prepros.io.
Pour commencer, faites glisser un projet contenant un fichier CSS dans l'interface. Cliquez ensuite sur le nom du fichier CSS pour ouvrir un panneau de paramètres sur le côté droit. À partir de là, vous pouvez cocher les cases AutoPrefix CSS afin d'activer Autoprefixer, et Activer Cssnext pour utiliser cssnext:
Vous pourrez maintenant utiliser toutes les fonctionnalités du pack de plug-in cssnext, ainsi que faire en sorte que votre code CSS soit automatiquement préfixé..
Bon, résumons rapidement ce que nous avons couvert ci-dessus:
@ règles pour activer des plugins spécifiquesCodePen et Prepros sont deux excellents moyens de se familiariser presque immédiatement avec PostCSS. Cependant, l’inconvénient est que vous ne devez pas choisir les plugins à utiliser..
Lorsque vous serez prêt à exploiter toute la puissance de PostCSS, vous devrez choisir et configurer votre propre sélection de plug-ins. Le moyen le plus accessible de le faire consiste probablement à configurer des projets PostCSS personnalisés via des gestionnaires de tâches tels que Gulp ou Grunt..
Vous apprendrez comment procéder dans les deux prochains tutoriels, «Guide de démarrage rapide: Configuration de Gulp» et «Guide de démarrage rapide: Configuration de Grunt»..
