Tuto : Écrire rapidement son CSS avec Emmet
LESS, SCSS ou SASS peuvent vous permettre d'écrire plus rapidement vos feuilles de style CSS. Emmet révolutionne encore le processus de rédaction : lorsque vous l'aurez essayé, vous ne pourrez plus vous en passer 😉.
Emmet c'est quoi ?
Emmet est un système performant d'abréviations qui convertit quelques lettres en ligne CSS ou HTML complète, directement dans votre éditeur de texte.
Installation
Emmet est disponible pour votre éditeur de textes favori sur cette page :
www.emmet.io/download
Pour Brackets ou Atom, il vous suffit simplement de rechercher "emmet" dans le Gestionnaire d'extensions, d'installer Emmet et de redémarrer.
Tutoriel
Prérequis
- CSS niveau basique
- HTML niveau basique
Dans une feuille de style CSS tapez :
w:100
Appuyez sur la touche Tab.
w:100
est devenu width: 100px;
!Quelques exemples :
h:25vw
devient :height: 25vw;
Les 2 points sont optionnels avec les chiffres lorsqu'il n'y a pas d’ambiguïté. Par exemple :
h250
devient :height: 250px;
ml20
devient :margin-left: 20px;
d:n
devient :display: none;
p:a
devient :position: absolute;
bg
devient :background: #000;
bg+
devient :background: #fff url() 0 0 no-repeat;
tt
devient :text-transform: uppercase;
bd+
devient :border: 1px solid #000;
bdrs50%
devient :border-radius: 50%;
trf:r
devient :transform: rotate(angle);
et très pratique :
!
devient :!important
Et ça fonctionne aussi pour html !
toto
devient :<toto></toto>
#toto
devient :<div id="toto"></div>
.toto
devient :<div class="toto"></div>
ul>li*4
devient :<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
!
devient :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Vous pouvez jouer à chercher vous-même les syntaxes pour chaque commande ou utiliser la liste des commandes :
docs.emmet.io/cheat-sheet
Si vous vous trompez de syntaxe, Emmet mettra ce qui lui semble le plus proche.
Retour aux tutos
Besoin de l'aide d'un professionnel pour créer votre site ou votre publication graphique ? Contactez-moi !
Vous êtes libre de réutiliser cet article à condition de mentionner qu'il a été écrit par Creavolt.fr
Optimiser vos images pour le web
Créer une application mobile Androïd en HTML avec Cordova
Besoin de l'aide d'un professionnel pour créer votre site ou votre publication graphique ? Contactez-moi !
Vous êtes libre de réutiliser cet article à condition de mentionner qu'il a été écrit par Creavolt.fr
Ces tutos peuvent vous intéresser
Optimiser vos images pour le web
Créer une application mobile Androïd en HTML avec Cordova