Source vidéo : http://livestyle.emmet.io/
L’intégration HTML/ CSS est une tâche qui peut être plus ou moins longue suivant la complexité du projet. Les intégrateurs recherchent constamment de nouvelles techniques et fonctionnalités qui leur permettent de gagner du temps ici et là.
Emmet LiveStyle est un plug-in actuellement en version bêta, disponible sur Chrome, Safari et Sublime Text 2 et 3. Il permet au navigateur de prendre immédiatement en compte les modifications de votre feuille de styles ce qui vous évite de rafraîchir la page.
Ce n’est pas tout : Toutes les propriétés CSS modifiées via l’inspecteur d’élément seront également ajoutées automatiquement à votre feuille de styles.
Attention, pour toute modification du code HTML, vous devrez rafraîchir votre page comme d’habitude, souhaitons que les prochaines versions nous affranchisse définitivement de la touche F5.
Installation
Installer l’extension « LiveStyle » depuis le Package Control de Sublime Text.
Téléchargez ensuite l’extension pour le navigateur que vous utilisez (ici Google Chrome).
Rendez-vous sur la page que vous souhaitez intégrer et ouvrez votre inspecteur d’élément.
Vous devriez voir apparaitre l’item « LiveStyle » sur votre menu horizontal.
Cliquez sur « LiveStyle » et assurez-vous que le plug-in détecte bien votre éditeur de texte.
Il vous suffit ensuite d’indiquer le chemin vers votre feuille de styles et le tour est joué.
Pour que la synchronisation se face correctement vous devez laisser la fenêtre de l’inspecteur d’élément ouverte.