Jusqu'ici, nous avons utilisé PostCSS pour l'optimisation des feuilles de style, l'ajout de fonctionnalités de prétraitement et la génération de certaines conventions de dénomination de classes. Mais comment aider simplement l'écriture de vieux CSS?
Il y a tellement de petits morceaux de code que les concepteurs de sites Web moyens écrivent des milliers de fois au cours de leur carrière, et si vous pouvez gagner un peu de temps sur chacun d'eux, cela représente finalement beaucoup de travail..
Dans ce didacticiel, nous allons utiliser PostCSS pour réduire le temps de saisie du code journalier via une série de raccourcis et d’ajouts abrégés. Commençons!
Configurez votre projet
Vous serez déjà familiarisé avec ce processus, mais la première chose à faire est de configurer votre projet pour qu'il utilise Gulp ou Grunt. 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 devriez donc le trouver un peu plus simple à utiliser..
Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
Guide de démarrage rapide PostCSS: Gulp Setup or
Guide de démarrage rapide PostCSS: Configuration Grunt
respectivement.
Toutefois, si vous ne souhaitez pas configurer votre projet à partir de zéro, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage Gulp ou Grunt fourni dans un dossier de projet vide. Puis avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Installer des plugins
Pour ce tutoriel, nous installerons plusieurs plugins, chacun gérant un type de raccourci ou un raccourci différent..
Que vous utilisiez Gulp ou Grunt, exécutez la commande suivante dans votre dossier de projet pour installer les plugins que nous utiliserons:
Nous sommes maintenant prêts à charger les plugins dans votre projet.
Charger des plugins via Gulp
Si vous utilisez Gulp, ajoutez ces variables sous les variables déjà présentes dans le fichier:
var alias = require ('postcss-alias'); var crip = require ('postcss-crip'); var magician = require ('postcss-font-magician'); var triangle = require ('postcss-triangle'); var circle = require ('postcss-circle'); var linkColors = require ('postcss-all-link-colors'); var center = require ('postcss-center'); var clearfix = require ('postcss-clearfix'); var position = require ('postcss-position'); var size = require ('postcss-size'); var verthorz = require ('postcss-verthorz'); var colorShort = require ('postcss-color-short');
Maintenant, ajoutez chacun de ces nouveaux noms de variables dans votre processeurs tableau:
processeurs var = [alias, crip, magicien, triangle, cercle, linkColors, centre, clearfix, position, taille, verthorz, colorShort];
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.
Charger des plugins via Grunt
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
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.
Bon, maintenant que vos plugins sont tous installés, apprenons à les utiliser pour les raccourcis CSS et les raccourcis.
Utiliser le raccourci pour les propriétés
Il y a beaucoup de propriétés que nous devons taper encore et encore et plus à nouveau en CSS. Bien sûr, le temps nécessaire pour saisir une poignée de caractères une fois est très petit, mais au fil des années de développement, tout cela s’ajoute. Nous allons examiner ici deux plugins qui vous permettent de réduire ces propriétés en versions abrégées pour obtenir un flux rapide et fluide lorsque vous définissez votre code CSS..
Définissez votre propre sténographie
Le plugin postcss-alias de Sean King vous permet de définir votre propre raccourci, ou «alias», pour toutes les propriétés que vous souhaitez abréger. Cela vous permet de vous assurer que la sténographie que vous utilisez correspond à la façon dont fonctionne votre esprit et est donc facile à retenir pour vous..
Pour définir certains alias, ajoutez une règle at en haut de votre feuille de style avec la syntaxe @ alias …. Puis, à l'intérieur de la règle at, configurez vos alias en ajoutant nom d'alias: nom de propriété;.
Ajoutez l’exemple suivant à votre fichier «src / style.css», qui configurera des alias pour le taille de la bordure, style de bordure et couleur de la bordure Propriétés:
@ alias bsz: border-size; bst: style frontière; bcl: couleur de bordure;
Ajoutez ensuite ce code pour tester en utilisant les nouveaux alias:
.set_border bsz: 1px; bst: solide; bcl: #ccc;
Compilez votre fichier et dans votre fichier «dest / style.css», vous devriez maintenant voir:
.set_border border-size: 1px; style de bordure: solide; couleur de bordure: #ccc;
Pour en savoir plus sur postcss-alias, rendez-vous sur: https://github.com/seaneking/postcss-alias
Plug 'n' Play sténographie
Si vous souhaitez utiliser de nombreux raccourcis de propriété, mais que vous ne voulez pas définir vous-même chacune d’elles, vous pouvez consulter le plugin postcss-crip de Johnie Hjelm, qui contient des centaines d’abréviations de propriété prêtes pour plugin et jouer utiliser.
Par exemple, ajoutez le code suivant à votre fichier «src / style.css», qui contient un raccourci pour la haut de la marge, marge droite, marge inférieure et marge gauche Propriétés:
Pour en savoir plus sur postcss-crip, rendez-vous sur: https://github.com/johnie/postcss-crip
Et voir la liste complète des abréviations de propriété à: https://github.com/johnie/crip-css-properties
Sortie @ font-face sur une ligne
Le plugin postcss-font-magician de Jonathan Neal porte bien son nom. Il vous permet d’utiliser des polices personnalisées via un simple famille de polices règle comme si vous utilisiez une police standard, et la police fonctionnera comme par magie.
Ajoutez le code suivant à votre fichier “src / style.css”:
body font-family: "Fleur indépendante";
C'est tout. C'est tout ce qu'il faut pour utiliser postcss-font-magician. Pas de syntaxe spéciale, utilisez simplement le nom de la police comme vous le feriez avec un autre.
Dans ce cas, la police Indie Flower est celle que j'ai sélectionnée dans la bibliothèque Google Fonts. Je n'ai ajouté aucun fichier de police personnalisé à mon projet, donc le plug-in le verra et vérifiera si la police spécifiée est disponible dans Google Fonts. Quand il découvre qu'il est disponible, il crée le fichier approprié. @ font-face code complètement automatiquement.
Compilez votre fichier puis examinez votre fichier «dest / style.css», où vous verrez que ce code a été ajouté dans:
@ font-face font-family: "Fleur indépendante"; style de police: normal; poids de la police: 400; src: local ("Fleur indépendante"), local (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc4x4R1uOSeegc5U.eot?#) format ("eot"), url La taille de la marchandise est la suivante: )
Vous pouvez vérifier que la police se charge correctement en créant un nouveau fichier dans votre dossier «dest» nommé «index.html» et en y ajoutant ce code:
Titre de test
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo chez semper volutpat, lorem justo tincidunt urna, en mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.
Pour charger les polices, vous devez visualiser ce fichier via un http: // adresse plutôt que fichier:// afin de télécharger le fichier sur un hôte Web ou d’utiliser une application telle que Prepros pour créer un aperçu en direct.
Vous devriez voir la police Indie Flower appliquée à tout votre texte, comme ceci:
En savoir plus sur postcss-font-magician ici: https://github.com/jonathantneal/postcss-font-magician
Créer des formes CSS
Si vous avez déjà utilisé du CSS pur pour créer des formes, vous saurez que cela peut être un excellent moyen d’inclure des éléments comme des cercles et des triangles dans vos conceptions, mais que cela peut aussi être assez délicat. En particulier dans le cas des triangles, déterminer le code dont vous avez besoin pour obtenir une forme orientée dans la bonne direction, à la bonne taille peut sembler quelque peu contre-intuitif..
C'est là que les plugins postcss-circle et postcss-triangle de Jed Mao viennent à la rescousse. Les deux plugins créent une syntaxe simplifiée et un moyen intuitif de créer des cercles et des triangles avec du CSS pur..
Ajouter un cercle
Pour créer un cercle, utilisez la syntaxe cercle: taille couleur;. Ajoutez le code suivant à votre fichier “src / style.css”:
.cercle cercle: 8rem # c00;
Compilez-le et vous verrez le code suivant ajouté à votre fichier «dest / style.css»:
Ajoutez maintenant ce code HTML au fichier «dest / index.html» créé dans la dernière section:
Jetez un regard neuf sur votre fichier dans un navigateur et vous devriez maintenant voir un cercle rouge:
En savoir plus sur postcss-circle à l’adresse: https://github.com/jedmao/postcss-circle
Ajouter un triangle
Vous pouvez ajouter trois types de triangle à l’aide de ce plugin; isocèles, isocèles droits et équilatéraux. Chacune a des ensembles de syntaxe légèrement différents, que vous pouvez lire en détail dans le dépôt Github du plugin..
Nous allons ajouter un triangle isocèle dont la syntaxe est la suivante:
triangle: pointant-; largeur: ; la taille: ; Couleur de fond: ;
Ajoutons cet exemple de triangle isocèle à notre fichier «src / style.css»:
Compilez le fichier et vous devriez maintenant voir le triangle complet CSS dans votre fichier «dest / style.css»:
.triangle isocèle largeur: 0; hauteur: 0; style de bordure: solide; couleur de bordure: transparent; largeur de la bordure: 4rem 0 4rem 7rem; border-left-color: # c00;
Pour voir le triangle dans votre fichier «dest / index.html», ajoutez ce code HTML:
Lors de l'actualisation de ce fichier dans votre navigateur, vous devriez maintenant voir un triangle rouge isocèle pointant vers la droite:
En savoir plus sur postcss-triangle à l’adresse suivante: https://github.com/jedmao/postcss-triangle
Utiliser des raccourcis pour les tâches courantes
Définir le style de lien
La définition des couleurs pour les liens est un travail qui doit être effectué dans chaque projet et nécessite la définition de styles pour les liens par défaut ainsi que pour quatre états de lien différents. Le plugin postcss-all-link-colors de Jed Mao vous permet de raccourcir ce processus, en affichant les couleurs de tous vos liens à la fois..
Ajoutez ce qui suit à votre “src / style.css”:
un @ link-colours all # 4D9ACC;
Ensuite, compilez votre fichier et vous verrez que tous les états de lien requis ont été définis:
Vous avez également la possibilité de générer une couleur différente pour un état spécifique. Il suffit d’ajouter des accolades à la fin de la règle, qui utilise la syntaxe. état: couleur;.
Mettez à jour le code que vous venez d'ajouter à votre fichier «src / style.css» comme suit:
un @ link-colours all # 4D9ACC hover: # 5BB8F4;
Maintenant, lors de la compilation, vous verrez que l'état de survol a une couleur différente du reste des styles:
En savoir plus sur postcss-all-link-colors à l'adresse: https://github.com/jedmao/postcss-all-link-colors
Centrer verticalement ou horizontalement
Le centrage, verticalement ou horizontalement, est l’une de ces tâches qui n’est pas moins épineuse pour les développeurs CSS. Le plugin postcss-center de Jed Mao simplifie grandement la tâche avec l'introduction de centre supérieur; pour le centrage vertical, et gauche: centre; pour centrage horizontal.
Ajoutez ce code à votre fichier “src / style.css”:
.centered top: center; gauche: centre;
Ensuite, compilez-le et vous verrez le code suivant:
.centré position: absolue; en haut: 50%; à gauche: 50%; marge droite: -50%; transformer: traduire (-50%, -50%);
Remarque: le centrage utilise un positionnement absolu, vous devrez donc envelopper vos éléments centrés avec un parent utilisant un positionnement relatif, absolu ou fixe. Étant donné que les éléments positionnés de manière absolue n’affectent pas la hauteur ou la largeur de leurs parents, vous souhaiterez également définir la hauteur et la largeur de l’élément parent.
Par exemple, ajoutez gauche: centre; au .cercle La classe que vous avez créée précédemment sera centrée horizontalement:
.cercle cercle: 8rem # c00; gauche: centre;
Ajoutez ensuite cette seconde classe pour envelopper le cercle en lui donnant un positionnement relatif et une hauteur correspondant au cercle:
.circle_wrap position: relative; hauteur: 8rem;
Maintenant, ajoutez un élément portant cette classe comme une enveloppe autour de votre HTML de cercle existant:
Lorsque vous revenez en arrière et actualisez votre page, vous devriez voir que votre cercle est centré horizontalement:
Pour en savoir plus sur postcss-center, rendez-vous sur: https://github.com/jedmao/postcss-center
Sortie Clearfix sur une ligne
Dans toute conception intégrant des éléments flottants, la création d’une classe de correctifs est si pratique qu’elle est essentielle. Le plug-in postcss-clearfix de Sean King transforme la création de ce style clearfix en une tâche d'une ligne, en ajoutant réparer comme une valeur possible qui peut être utilisée avec le clair propriété.
Pour un correctif qui fonctionnera sous IE8 +, ajoutez ce qui suit dans votre fichier «src / style.css»:
.clearfixed clear: fix;
Lors de la compilation, vous verrez que le code de correction suivant est prêt à être utilisé:
.clearfixed: after content: "; display: table; clear: les deux;
Si vous avez besoin d’un correctif qui fonctionnera sous IE6 +, utilisez la valeur réparer l'héritage au lieu de plaine réparer, ainsi:
.clearfixed_legacy clear: correction de l'héritage;
Lorsque ce code est compilé, vous verrez qu'il inclut un petit contenu supplémentaire qui le rend convivial pour les navigateurs hérités:
.clearfixed_legacy: before, .clearfixed_legacy: after content: "; display: table; .clearfixed_legacy: after clear: both; .clearfixed_legacy zoom: 1;
Pour en savoir plus sur postcss-clearfix, rendez-vous sur: https://github.com/seaneking/postcss-clearfix
Définir le positionnement sur une seule ligne
Lorsque vous souhaitez utiliser un positionnement autre que par défaut, c.-à-d.. absolu, fixé ou relatif, vous devez taper les valeurs pour l'élément Haut, droite, bas et la gauche positionnement manuel. Il n'y a pas de raccourci que vous pourriez utiliser pour définir des marges ou un remplissage sur une ligne. C'est-à-dire jusqu'à ce que vous installiez le plugin postcss-position de Sean King.
Avec ce plugin, lorsque vous utilisez le position propriété, après avoir défini une valeur de absolu / fixé / relatif, vous pouvez déclarer Haut, droite, bas et la gauche valeurs dans la même ligne.
Ajoutez l'exemple de code suivant à votre fichier «src / style.css»:
.absolue position: absolue 1rem 1rem 0 0;
Après la compilation, vous verrez que le raccourci a été compilé dans les lignes séparées que vous auriez normalement à taper manuellement.
.absolu position: absolu; en haut: 1rem; à droite: 1rem; en bas: 0; gauche: 0;
La façon dont ces valeurs sont déclarées est avec le même motif que dans marge ou rembourrage raccourci, c’est-à-dire que vous pouvez également définir haut et bas dans la première valeur, puis droite et gauche dans la seconde, ou vous pouvez définir une valeur à appliquer aux quatre.
.fixed_two_values position: fixed; en haut: 2rem; à droite: 1rem; en bas: 2rem; à gauche: 1rem; .relative_one_value position: relative; en haut: 3rem; à droite: 3rem; en bas: 3rem; à gauche: 3rem;
En savoir plus sur postcss-position sur: https://github.com/seaneking/postcss-position
Définir la largeur et la hauteur à la fois
Le plugin postcss-size d’Andrey Sitnik vous permet de crunch le plus souvent utilisé largeur et la taille propriétés en un seul Taille propriété. Vous pouvez l'utiliser de deux manières: en transmettant deux valeurs, la première en largeur et la seconde en hauteur, ou une valeur utilisée pour la largeur et la hauteur..
Testez-le en ajoutant le CSS suivant à votre fichier «src / style.css»:
.size_a taille: 1rem 2rem; .size_b taille: 1rem;
Lors de la compilation, vous devriez voir ce code maintenant dans votre fichier «dest / style.css»:
En savoir plus sur postcss-size sur: https://github.com/postcss/postcss-size
Définir l'espacement vertical et horizontal
En tant que grand amateur de codage efficace, lors de la rédaction des marges et des marges, qui sont souvent égales des deux côtés, je me suis souvent dit qu'il me fallait un raccourci pour déclarer à la fois les espacements vertical et horizontal. J'ai même écrit quelques mixins préprocesseurs pour faire exactement cela. Mais je n'aurai plus besoin de ces mixins grâce au plugin postcss-verthorz de David Hemphill.
Avec ce plugin, vous pouvez utiliser padding-vert ou margin-vert pour définir l'espacement vertical, et padding-horz ou margin-horz pour définir l'espacement horizontal. Ajoutez l'exemple de code suivant à votre fichier «src / style.css» pour que cela fonctionne:
Vous pouvez également raccourcir davantage ces propriétés en les abrégeant en deux lettres. L'exemple de code que nous avons utilisé ci-dessus pourrait être abrégé comme suit et le résultat serait exactement le même:
.spacing_short pv: 1rem; mh: 2rem;
Pour en savoir plus sur postcss-verthorz, rendez-vous sur: https://github.com/davidhemphill/postcss-verthorz
Codes de couleur de sortie
Ma couleur de texte par défaut préférée est # 232323 et je ne sais pas si ce n'est que moi, mais j'en ai marre de répéter encore et encore ces deux mêmes chiffres. J'ai souvent souhaité qu'il y ait un raccourci, semblable à la façon dont vous pouvez couper #ffffff jusqu'à #fff. Avec le plugin postcss-color-short d’Andrey Polischuk, il y a.
Lors de l'utilisation de ce plugin, si vous définissez un code de couleur à deux chiffres, ces chiffres seront répétés jusqu'à ce qu'un code à six chiffres soit créé, par exemple. # 23 va devenir # 232323. Si vous définissez un code de couleur à un chiffre, il sera répété jusqu'à ce qu'il y ait trois chiffres, par exemple. #F va devenir #fff. Vous pouvez même l'utiliser pour définir rgba () couleurs, où le premier chiffre que vous passez sera répété trois fois, et le second utilisé comme valeur alpha, par exemple. rgba (0, 0.5) va devenir rgba (0, 0, 0, 0.5).
Ajoutez ce qui suit dans votre fichier «src / style.css» pour essayer tout ce qui précède:
En savoir plus sur postcss-color-short sur: https://github.com/andrepolischuk/postcss-color-short
Résumer
Récapitulons rapidement tout ce que nous avons vu dans ce tutoriel:
Les petites tâches de codage quotidiennes ne semblent pas vraiment être une tâche à la fois, mais elles s’accumulent en un temps considérable; il est donc utile de les raccourcir.
Le plugin postcss-alias vous permet de créer votre propre raccourci pour les propriétés
Le plugin postcss-crip a des centaines de raccourcis de propriétés prédéfinis
Le postcss-font-magician vous permet d’utiliser des polices personnalisées comme si elles étaient des polices par défaut. @ font-face code pour vous
Les plugins postcss-circle et postcss-triangle permettent de créer des cercles et des triangles CSS de manière intuitive et intuitive.
Le plugin postcss-all-link-colors vous permet de générer des couleurs pour tous vos états de lien à la fois.
Le plugin postcss-center fournit un centrage vertical et horizontal avec centre supérieur; et gauche: centre;
Le plugin postcss-clearfix vous permet de générer du code clearfix avec clair: réparer;
Le plugin postcss-position vous permet d’ajouter votre Haut, droite, bas et la gauche paramètres dans le cadre de votre utilisation de la position propriété
Le plugin postcss-size vous permet de définir simultanément la largeur et la hauteur
Le plugin postcss-verthorz permet de générer l'espacement horizontal et vertical avec des règles simples..
Le plugin postcss-color-short vous permet d'utiliser des codes hexadécimaux à un ou deux chiffres, ainsi que d'autres raccourcis de couleur..
Dans le prochain tutoriel
Dans le prochain tutoriel, nous allons passer aux plugins qui sont géniaux, mais ne tombez dans aucune catégorie en particulier. Je te vois bientôt dans "Divers Goodies".
Share
Accentsconagua
