Share
La plupart des articles et des tutoriels sur Emmet traitent du traitement du code HTML, mais nous allons à présent nous intéresser à Emmet avec CSS. Prêt à charger votre écriture CSS? Allons-y!
Remarque: Il est recommandé d’avoir une compréhension raisonnable de CSS avant de suivre.
Emmet est une collection d’abréviations qui se développent en html / xml / css, approfondissant l’idée des extraits de texte. Visitez la page de téléchargement et installez Emmet pour l'éditeur de votre choix.
Lorsque vous travaillez avec Emmet, entrez l'abréviation appropriée et appuyez sur la touche d'action. En Sublime Text c'est le LANGUETTE clé. La syntaxe du fichier sur lequel vous travaillez déterminera les abréviations à utiliser.
Emmet utilise des abréviations de bon sens pour faciliter l'écriture de code. Cela peut aider un peu ou beaucoup, selon le temps que vous investissez dans l'apprentissage des tenants et des aboutissants.
Emmet (anciennement connu sous le nom de Codage zen) est un toolkit pour développeurs web qui peut grandement améliorer votre workflow HTML & CSS.
Non seulement cela vous fait gagner du temps, mais cela rend l'écriture de code amusante. Il y a juste quelque chose à propos de taper quelques caractères et les regarder s'étendre comme par magie dans un code parfaitement formaté! Si vous rencontrez un problème, le bouton Annuler annule le code développé en abréviation pour que vous puissiez le modifier et le développer à nouveau..
J'ai également constaté qu'Emmet m'aidait à mémoriser le code plus facilement. Les abréviations sont tout simplement plus faciles à mémoriser. transformation de texte: devient "tt" et text-align: justifier; devient "taj". Voyez comment cela peut être utile? Vous commencerez à apprendre de nouvelles propriétés CSS et à mémoriser les abréviations. Vous n'avez même pas besoin de vous soucier des points-virgules et des espaces, Emmet s'occupe de ça!
Examinons les composants de base des abréviations CSS d’Emmet et comment ils accélèrent le flux de travail..
CSS donne des valeurs aux propriétés, comme la taille de la police, la marge, le remplissage, etc..
Tiré de la meilleure façon d'apprendre CSS Emmet a défini chaque propriété CSS connue avec une abréviation. Alors bas de la bordure est bdb, bordure supérieure est bdt. Voici un exemple de taille de police, lequel est fz.
Après avoir tapé l'abréviation, appuyez sur la touche d'action (dans mon cas, la tabulation) et Emmet affichera magiquement l'abréviation dans un code CSS valide, en plaçant le curseur à l'endroit souhaité..
Maintenant que nous comprenons les propriétés, il est temps d'ajouter une valeur. Cela se fait en tapant l'abréviation en combinaison avec la valeur requise. Par exemple, fz18 va sortir à taille de police: 18px;. Vous n'avez pas besoin de taper "px" car Emmet l'ajoutera par défaut. Si un article n'a pas d'unité (comme poids de la police), Emmet est assez malin pour savoir ne pas ajouter le px.
Que faire si vous n'utilisez pas toujours des pixels? Les unités em, rem, %, ex, et px sont tous disponibles dans Emmet. Chaque unité (bien que cela puisse sembler un peu extrême) a aussi une forme abrégée:
Accentsconagua
px → défautp → % e → em r → rem X → ex Pour utiliser une unité, ajoutez simplement l'abréviation de l'unité à la fin de votre valeur. L’exemple ci-dessous définit une taille de police avec em
Certaines propriétés, comme marge, permettre plusieurs valeurs. Pour ce faire avec Emmet, séparez chaque valeur par un tiret (-). Regardez l'exemple ci-dessous pour définir quatre valeurs pour le corps. marge.
Emmet vous demande de prévoir # au lieu de l'ajouter à votre valeur. Alors le # va après votre propriété, mais avant votre valeur. Un nombre différent de caractères génère différents codes hexadécimaux. Jetez un oeil à quelques exemples:
#1 → # 111111 # e0 → # e0e0e0 # fc0 → # ffcc00 Voici un exemple de définition de la couleur de corps comme # 111 (c # 1):
Même si le !important tag ne doit pas être utilisé très souvent, Emmet vous le propose tout simplement. Ajouter un point d'exclamation ! à votre abréviation comme ceci:
Maintenant que nous avons une compréhension de base des fonctions CSS d’Emmet, il est temps de commencer à les assembler. De manière similaire aux fonctions HTML, vous allez ajouter un signe plus (+) pour chaque article. Rappelez-vous que si vous gâchez quelque chose, vous pouvez toujours appuyer sur Annuler et réviser la chaîne..
Écrivez toutes vos propriétés et valeurs requises en les séparant par un + puis appuyez sur la touche d'action pour voir le résultat.
Voici un exemple de définition de marges et de rembourrages différents pour le corps.
N'oubliez pas que vous pouvez utiliser toutes ces abréviations ensemble ou séparément. Il ne s'agit pas d'obtenir les codes Emmet correctement dès la première fois, il s'agit simplement de faciliter l'écriture de vos CSS. Pour terminer ces GIF animés, voici une démonstration rapide du style permettant de créer une div avec une classe de panneau.
Emmet est un outil puissant. Réclamé par certains comme un outil de codage «haute vitesse», il vous permet de passer moins de temps à écrire sans cesse les mêmes choses sans avoir à créer manuellement vos propres extraits. Emmet a été inspiré par les sélecteurs CSS et peut être utilisé dans tous les principaux éditeurs de texte pour s'adapter au flux de travail de tout développeur..
N'oubliez pas que tout nouvel outil que vous ajoutez à votre flux de travail aura une courbe d'apprentissage, mais ne prenez pas plus de temps que nécessaire pour déterminer comment il fonctionne pour vous. Consulter régulièrement la documentation est un excellent recyclage et Emmet fournit un aide-mémoire contenant toutes les fonctions possibles. Ceci a été conçu pour vous aider à penser moins et à écrire plus de code!
Comment utilisez-vous Emmet dans votre flux de travail? Quelle est votre fonction CSS préférée? Faites le nous savoir dans les commentaires!
