Живой предварительный просмотр с LESS или SCSS?
Я пытаюсь выяснить, есть ли способ использовать LESS или SCSS без необходимости сохранять документ или обновлять браузер. В настоящее время я использую CSS Edit, который отлично подходит для предварительного просмотра в реальном времени, но я не могу найти способ заставить предварительный просмотр в реальном времени работать с LESS или SCSS. Моя идеальная ситуация - получить действительно живую (или максимально приближенную) установку для работы с Textmate и моим другом. Я рассмотрел несколько вариантов, WebPutty великолепен, но он работает в бета-версии и на веб-основе, поэтому я хотел бы найти решение, которое может вписаться в мой существующий рабочий процесс.
Большое спасибо
8 ответов
Нет полного решения для того, что вы ищете. Инструменты Chrome для разработчиков (с включенными sass исходными картами) - ваш лучший выбор, но я не думаю, что вы можете делать миксины
http://livestyle.emmet.io/ - еще один вариант, который вы можете попробовать
Брекеты хорошо работают с живыми изменениями, но применяются только для хрома
Вот что я делаю, и это служит цели и работает как шарм в Mac/ PC и Linux. Один терминал открыт, что делает sass --watch. Есть другой терминал / приложение, которое позволяет вам запускать live-reload.
Ваш sass будет скомпилирован, и как только ваша таблица стилей изменится, все ваши браузеры обновятся. Но вы не можете делать инъекцию стилей с этим, то есть страница будет обновляться (если вы хотите использовать диалоги тем, вам придется открывать их снова) Но там другие инструменты, доступные для введения стиля, а также
Надеюсь это поможет!
Это может быть то, что вы ищете: http://livereload.com/
Я только нашел это сам, пока гуглял по той же проблеме, Хаа!
В настоящее время это только для 64-битных Mac. Это также в бета-версии.. Версия для Windows под dev.
Не можете найти ссылку на v1, упомянутую на сайте?
Если вы используете статические файлы, вы можете использовать этот код, взятый из http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
Однако, если вы используете localhost, я еще не понял, как заставить это работать.
Проверьте EDGE. http://getedge.io/ - это позволяет вам в реальном времени редактировать файлы Sass и LESS из Sublime Text или Textmate. Нет необходимости сохранять файл - он обновляется по мере ввода. Вы можете подписаться на приватную бета-версию прямо сейчас.
Я думаю, что сейчас нет такой надстройки, но я также фанат Live CSS Editor (если вы имели в виду CSS Edit).
Я думаю, было бы полезно иметь что-то похожее с поддержкой SASS или LESS, поэтому я сделал быстрый прототип для такого дополнения Chrome (аналог Live CSS Editor). Включает подсветку синтаксиса и поддержку LESS с использованием клиентской библиотеки LESS. Это еще не удобно для пользователя, поэтому не является кандидатом в Chrome Store, но вот это Google Code Project, где его можно загрузить и загрузить в Chrome как распакованное расширение. Я постараюсь улучшить его с течением времени, но любой другой может попробовать тоже;)
Скриншоты и немного больше в этом посте.
Мой коллега и я взломали http://less2css.org/ на днях. Позволяет вам выбрать версию и увидеть ваши менее конвертированные в режиме реального времени.
Надеюсь, это поможет кому-то.
Пробовал версию закладки на рельсах локального сервера. Работает на одном дыхании! CssRefresh
live.js - это ваше решение:)
Он не только работает с HTML, JS, CSS, но и меньше. Вы должны обмануть его с помощью filetype css:
<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">