Сергей Чикуёнок вновь порадовал всех front-end разработчиков, запилив Emmet LiveStyle, — плагин для живого двунаправленного редактирования CSS нового поколения (браузер ↔ редактор).
На данный момент он работает в Google Chrome, Safari и Sublime Text. Поддержка других браузеров и редакторов планируется в самом ближайшем будущем.
Демонстрация наиболее мощных функций LiveStyle
Возможности LiveStyle
- Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц
- Нет необходимости хранить файлы локально
- Кроссплатформенность
- Multi-view и multi-device: результат можно просматривать одновременно в нескольких разных окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна
- Мультисайтовость: можно редактировать одновременно несколько сайтов, например, мобильную и настольную версию
- Легкая установка: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта
Установка
Для начала установите Package Control в Sublime Text. После инсталляции откройте Command Palette при помощи комбинации клавиш Ctrl+Shift+P выберите Package Control: Install. Найдите и установите расширение LiveStyle.
В браузере Google Chrome установите расширение Emmet LiveStyle. После установки откройте DevTools при помощи комбинации клавиш Ctrl+Shift+I и увидите новую вкладку LiveStyle.