Glorious paint moi avec des coeurs dans les jeux avec emmet à gauche et Sass à droite

Raccourcis & installations de Emmet & Sass


📅


Edit 2023

L’article est dédié à l’éditeur de texte Sublim Text 3 avec qui j’ai passé de bons moments, mais actuellement je ne bosse plus que sur VSCode. De mémoire Emmet y est présent par défaut, activé pour les fichiers HTML (Ctrl + Espace sur l’expression), et pour Sass il doit également y avoir des plugins pour générer le css, mais passé plutôt par un builder pour que cela soit clean (~gulp ou webpack).


Introduction

Dans cet article, nous allons voir les différents plugins/technologies utilisés assez communément dans le milieu du développement afin d’accélérer la création de code et d’augmenter notre confort de développeur.

Ces raccourcis nous permettent de créer du html et du css beaucoup plus rapidement, avec moins de chances d’erreurs de saisie.

Raccourcis Emmet

Attention, ces raccourcis fonctionnent sur certains types de fichiers uniquement, avec la configuration de base. Les raccourcis html fonctionneront sur des fichier avec une extension .html, tandis que les raccourcis css fonctionneront avec les fichier ayant une extension .css.

HTML

Il est préférable de voir Emmet en action et de faire un peu de pratique afin de bien se rendre compte de ses possibilité et de ses avantages. Voici un fichier html avec à la fois les instructions Emmet  (que vous pourrez tester en mettant le curseur à la fin et en appuyant sur la touche “Tabulation” sous Linux, ou peut être Ctrl + E sur d’autres systèmes d’exploitation).

Emmet html : Exemples prêt à être utilisés et principaux raccourcis claviers << clic droit > enregistrer sous. Ouvrir avec Sublim text VSCode (ce fichier n’est pas fait pour être lancé dans le navigateur).

N’hésitez pas à rajouter au favoris la cheat sheet Emmet, et/ou à l’imprimer et à l’accrocher au dessus de votre poste 😉

Je vous recommande également vivement d’aller faire un tour du coté de la documentation, pleine d’exemples visuels, et également interactive si vous souhaitez le tester directement sur le site (boutons “Try it yourself ! “).

Enfin, deux recommandations concernant les suites d’instructions :

  1. N’hésitez pas à déployer votre HTML afin de vérifier que tout est correct, puis utilisez Annuler (Ctrl + Z) afin de revenir sur votre instruction non déployée, afin de corriger/continuer votre suite d’instructions
  2. Ne vous forcez pas à tout faire d’un seul coup. Je recommande de ne jamais utiliser de suite d’instructions plus grande qu’une ligne. Procédez étape par étape : déployez votre instruction, puis une fois à l’intérieur de vos balises html, refaites une autre instruction. Deux instructions simples valent mieux qu’une seule grande instruction complexe.

CSS

Même si sublim text offre déjà quelques raccourcis css, Emmet pousse plus loin : il permet d’ajouter du css de manière assez intuitive, en utilisant pour raccourcis les premières lettres de chaque mot.

Bases

Par exemple, pour ajouter le css text-align: center; , vous n’aurez qu’a utiliser tac puis à développer votre instruction via la touche tabulation.

Certaines instructions fonctionnent également avec une seule lettre, telles que :

  • h / height
  • m / margin
  • p / padding
  • w / width

L’avantage de Emmet est que ce dernier rajoute automatiquement les : et ; nécessaires au css, et positionnent votre curseur de manière à n’avoir à taper que leurs valeurs.

Certaines instructions peuvent comporter des valeurs par défaut, par exemple ta ne se developpe pas en text-align: |;, mais en text-align: left;

Avancé

Emmet permet également de rentrer des valeurs directement dans l’instruction à développer.
Par exemple, si vous souhaitez avoir le css width: 100px; vous pouvez taper (puis étendre) w100px .

Attention à ne pas rajouter de ; à la fin. Emmet s’en chargera automatiquement.

Cela fonctionne pour la plupart des unités CSS :

  • p100  /  padding: 100;
  • p100px  /  padding: 100px;
  • p20em  /  padding: 20em;
  • h20rem  /  height: 20rem;
  • w100%  /  width: 100%;

Vous pouvez également passer plusieurs argument en les séparant par des tirets  .

Exemple :

mb0-auto devient margin: 0 auto;

ts2px2px-black devient text-shadow: 2px 2px black;

Attention, tout cela demande de la pratique car il existe quelques cas particuliers : au cas ou deux instructions seraient similaires au niveau des premières lettres, Emmet peut gérer cela de différentes manières.

Deux exemples concrets :

font-size et font-style commencent toutes les deux par fs.
font-size ayant une lettre peu utilisée z, cette dernière sera utilisée pour son instruction :

  • fs / font-style
  • fz / font-size
    • fz2em / font-size: 2em;

list-style-type: none; et letter-spacing: normal se ressemblent, on aurait tendance à vouloir utiliser lsn.
list-style-type: none; pourra être utilisée via l’instruction lstn (List-Style-Type: None;), ou encore lisn (LIst-Style-type: None;)

Instructions communément utilisées

Peut vous servir également d’inspiration pour trouver vos propres instructions 😉

  • fsi  /  font-style: italic;
  • fz1.2em  /  font-size: 1.2em;
  • ta  / text-align: left;
  • tac  /  text-align: center;
  • ttu  /  text-transform: uppercase;
  • ttc  /  text-transform: capitalize; // Première lettre en majuscule
  • ts2px2px-black  /  text-shadow: 2px 2px black;
  • m0 /  margin: 0;
  • m0-auto / margin: 0 auto;
  • mb10px  / margin-bottom: 10px;
  • p0  /  padding: 0;
  • pt10px  /  padding-top 10px;
  • w100%  /  width: 100%;
  • mw100%  /  min-width: 100%;
  • maw100%  /  max-width: 100%;
  • bgc  /  background-color: #fff;
  • gr  /  background-repeat : |;
  • op.3  /  opacity: .3; // Raccourci pour 0.3, soit 30% d’opacité
  • bdrs5px  /  border-radius: 5px;
  • dn  /  display: none;
  • db  /  display: block;
  • dib  /  display: inline-block;
  • po  /  position: relative;
  • poa  /  position: absolute;
  • ov / overflow: hidden;
  • etc. etc.

.. et encore bien plus en fin de la cheat sheet Emmet (..encore une fois).

Raccourcis Sass

Quelques liens utiles

Et voici une liste d’exemples et de bases sass fait en classe, compilée par Stéphane de la PA 102 <3.

Voici des sites de bonnes pratiques pour css & sass :

  • BEM / OOCSS // BodyElement Modifier & Oriented Object CSS
  • Smacss // Mon petit préféré, plus simple // Edit 2023 : Pas de https mais le site est la, pdf gratuit

Voici un fichier d’exemple :  conventions sass max, créé par mes soins pour illustrer les bonnes pratiques Sass, et qui contient également des recommandations de convention, de mise en page, etc.

Installations

Emmet

Edit 2023 : Par défaut sur VSCode

Le programme, ses plugins & tutoriaux sont disponibles à l’adresse suivante : https://emmet.io/ .

Pour Sublim Text 3, sa procédure d’installation est décrite ici : https://packagecontrol.io/packages/Emmet .
Via le package control : Ctrl + Shift + P > “Install package” > “Emmet” > Entrée > Vérifier en bas à gauche de l’éditeur le succès de l’installation, puis redémarrer Sublim ;  c’est très rapide.

Il est également disponible pour la majorité des autres éditeurs de texte.

Sass

Voici le lien vers le site officiel de Sass : http://sass-lang.com/ .

L’installation varie en fonction des différents systèmes d’exploitation.
(Note : contrairement à ce qui est dit sur le site, ruby n’est pas indispensable).

Encore une fois, c’est assez rapide de passer par le package control de sublim text : Ctrl + Shift + P > “Install package” > “Sass” > Installer Sass, puis Sass Builder > Redémarrer sublim text.

Via le menu, définir sass comme “builder” : Tools > Build system > Sass.
Utiliser Ctrl + B afin de “builder”/compiler votre sass, directement depuis Sublim text.

Brunch

Brunch est un logiciel de compilation de site web, vous permettant d’utiliser simplement vos technologies préférées, je vous le recommande vivement si vous souhaitez tester sass, ou l’utiliser uniquement pour du développement frontend.

Une fois installé, partez sur l’un des squelettes (boilerplate / projet par défaut) contenant les technologies qui vous intéressent. Ayant lu en diagonale (attention non testé), je vous recommande “brunch-banana-pancakes”.

Autre

Vous pouvez également utiliser node / npm / gulp afin de compiler du sass de manière automatique (un peu plus difficile à mettre en place, mais de bons boilerplates & tutoriels existent, notamment ceux de grafikart que je recommande chaudement.).

Edit 2021

Les raccourcis du turfu : curseurs & copiers/collés multiples, c’est sur ce magnifique post.


Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *