Предварительный просмотр с LESS или SCSS?

Question

Я пытаюсь выяснить, есть ли способ использовать LESS или SCSS без необходимости сохранять документ или обновлять браузер. В настоящее время я использую CSS Edit, который отлично подходит для предварительного просмотра в реальном времени, но я не могу найти способ заставить предварительный просмотр в реальном времени работать с LESS или SCSS. Моя идеальная ситуация - получить действительно живую (или максимально приближенную) установку для работы с Textmate и моим другом. Я рассмотрел несколько вариантов, WebPutty великолепен, но он работает в бета-версии и на веб-основе, поэтому мне бы понравилось решение, которое могло бы вписаться в мой существующий рабочий процесс.

Большое спасибо

Answer 1

Нет полного решения для того, что вы ищете.Инструменты Chrome для разработчиков (с включенными sass исходными картами) - ваш лучший выбор, но я не думаю, что вы можете делать миксины

http://livestyle.emmet.io/ - это еще один вариант, который вы можете попробовать

Скобки хорошо работают с живыми изменениями, но применимы только для chrome

Вот что я делаю, и это служит цели, и работает как брелок в mac / pc и linux. Есть один открытый терминал, который делает sass --watch. Есть другой терминал./ app, позволяющее запустить live-reload

Ваш sass скомпилируется, и как только ваша таблица стилей изменится, все ваши браузеры обновятся. Но вы не можете делать инъекцию стилей с этим, то есть страница будет обновляться (если выхотите добавить диалоги к темам, вам придется снова их открывать) Но есть и другие инструменты, доступные для внедрения стиля

Надеюсь, это поможет!

Answer 2

Проверьте EDGE.http://getedge.io - это позволяет вам редактировать Sass и LESS файлы из Sublime Text или Textmate.Нет необходимости сохранять файл - он обновляется по мере ввода.Вы можете подписаться на приватную бета-версию прямо сейчас.

Answer 3

Если вы используете статические файлы, вы можете использовать этот код, взятый из 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, я еще не понял, как заставить это работать.

Answer 4

Это может быть то, что вы ищете: livereload.com

Я только что нашел это сам, пока гуглял по той же проблеме, Хаа!

Этов настоящее время только для 64-битных компьютеров Mac.Он также находится в бета-версии .. Версия для Windows под dev.

Не могу найти ссылку на v1, упомянутую на сайте?

Answer 5

Я думаю, что сейчас такого дополнения нет, но я также фанат Live CSS Editor (если вы имели в виду CSS Edit).

Я думаю, было бы полезно иметь что-то похожее с поддержкой SASS или LESS, поэтому я сделал быстрый прототип для такого дополнения Chrome (аналог Live CSS Editor).Включает подсветку синтаксиса и поддержку LESS с использованием клиентской библиотеки LESS .Это еще не удобно для пользователя, поэтому не является кандидатом в Chrome Store, но вот это Проект Google Code , где его можно загрузить и загрузить в Chrome как распакованное расширение.Я постараюсь улучшить его с течением времени, но любой другой тоже может попробовать;)

Снимки экрана и немного больше в этом сообщении в блоге .

Answer 6

Мой коллега и я взбились http://less2css.org на днях.Позволяет вам выбрать версию и увидеть, как вы конвертировались в реальном времени.

Надеюсь, это кому-нибудь поможет.

Answer 7

Попробовал версию закладки на локальном сервере рельсов. Работает на одном дыхании! CssRefresh

Answer 8

live.js - это ваше решение :)

Это не только работает с html, js, css, но и меньше.Вы должны обмануть его с типом файла css:

<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">