---
title: Emmet LiveStyle
authors: Diego Eis
type: post
date: 2013-08-06
excerpt: Uma nova maneira de editar CSS.
url: /emmet-livestyle/
dsq_thread_id: 1576864401
categories:
  - Código
  - CSS
  - CSS3
  - Editores
  - HTML
  - Notícias
  - Técnicas e Práticas
tags:
  - 2013
  - codigo
  - CSS
  - emmet

---
Dos mesmos criadores de [Emmet][1], conheça o [Emmet LiveStyle][2].



O Emmet LiveStyle é um plugin que permite que ao editar o código CSS você veja as alterações na hora, on the fly!
  
A iniciativa é simples e você já deve ter visto milhares de outras iniciativas, mas agora eu acho que fizeram do jeito correto. A ideia de um editor bidirecional é que a partir do momento que você edita o código CSS, você consegue ver as alterações na hora, economizando o tempo de alternar janelas, salvar arquivos e etc. Não importa também se você altera o CSS direto no browser ou no seu editor, as modificações serão sincronizadas nessas duas interfaces. O Emmet LiveStyle não altera seu código fonte, ele apenas mapeia as mudanças, mantendo todo o código intacto mas aplicando suas modificações em cima do código já existente.

Ele funciona em Chrome, Safari em conjunto com Sublime Text. Se você usa dois monitores, vai adorar e com certeza vai ser uma daquelas coisas que depois que se acostumar, nunca mais vai querer editar código de outra forma. Abaixo, veja um vídeo de demonstração:

O pessoal listou em seu site algumas features:

  * Instant updates: see changes as-you-type. No file saving, no page reloading.
  * No local files required.
  * Cross-platform
  * Multi-view and multi-device updates. You can open the same page in different windows and get instant updates in all of them. If your monitor large enough, you can easily tweak responsive design as never before! And yes, changes made in DevTools of one window will be automatically applied to other ones.
  * Multi-site update. You can even live edit different web-sites, for example, desktop and mobile versions of you web-site that shares the same CSS code base.
  * Extremely easy setup: just open CSS file in editor and associate it with the browser one in LiveStyle browser pane. No complex mappings, patterns etc.

Leia as instruções e [instale agora][3] para testar.

 [1]: https://tableless.com.br/bye-zen-coding-bem-vindo-emmet/
 [2]: https://livestyle.emmet.io
 [3]: https://livestyle.emmet.io/install/