Хочу писать CSS стили через Браузер. Gulp?

Question

[JohnAPI]

Хочу разворачивать верстку на локальном сервере, открывать в браузере, и через браузер писать стили, и чтобы они сохранялись в css файле из браузера. Возможно такое? Помойму видел такое на Mac с помощью Sublime Text. Возможно замешан gulp.

Возможно ли такое и с помощью чего?

** Нужно готовое решение без использования Sublime, а для Brackets или отдельно от всего.

Answer 1

[HamSter]

Emmet LiveStyle устанавливается в sublime и в хроме
chrome расширение

Можно и в sublime писать стили - автоматически будет обновляться в браузере и так же наоборот!

*но работает, не очень хорошо

Comments

[JohnAPI]

Хочу без Sublime. Есть Brackets

[HamSter]

JohnAPI: а лучше, чтобы вообще все само и писалось

[JohnAPI]

Неужели готовое решение есть только для Sublime?

[Danila]

JohnAPI: вы можете прикрутить browser-sync с галпом и использовать любой редактор с живой перезагрузкой, хоть блокнот, другое дело зачем вам писать код в браузере?

Answer 2

[Сергей Горячев]

О, ужас, какие только извращения не придумывают люди)))))))))

Answer 3

[Артём Цымбалюк]

Почему бы не Gulp > browserSync

Comments

[JohnAPI]

Он делает то что было описано в тикете?
Так чтобы browser > css

[Артём Цымбалюк]

JohnAPI: такой способ который описываете Вы, я не встречал. А Вам предложил обратный, сохранение CSS с автоматическим перезапуском страницы.

[JohnAPI]

Готовое решение есть, называется Emmet LiveStyle, но нужно без Sublime.

Answer 4

[Денис Инешин]

Это порочная и устаревшая практика. Почему так? Потому что на лету браузеры видят лишь готовый CSS. А работать с чистым CSS конечно можно, но, в современных реалиях не нужно и даже вредно.

Современный мир фронтенд-разработки, дал нам другие супер мощные инструменты - препроцессоры. LESS/SASS/Stylus (в сочетании с Grunt/Gulp) и т.д.

Тот объем возможностей, которые они дают с лихвой перекрывает любые плюсы визуального редактирования CSS в браузере. Подумайте только, теперь в CSS есть переменные, наследование, миксины, функции и т.д. и т.п. Вот что реально ускоряет разработку!

Ну а визуальное редактирование осталось в прошлом (Дримвевер, плагины к FF и т.п.). Просто вымерло, как динозавры.

Answer 5

[Aves]

https://developer.chrome.com/devtools/docs/workspaces

Answer 6

[Александр]

Я работаю с Grunt (выбор заказчика). Берете Grunt, настраиваете его, устанавливаете плагин LiveReload для браузера. Все это запускаете. Работаете себе в редакторе (Sublime/WebStorm/Atom) и изменения в реалтайме смотрите в браузере.

Comments

[JohnAPI]

Нет, хочу именно в Brackets

[JohnAPI]

Мне нужно не из редактора в браузер изменения передавать, а наоборот. Читайте вопрос.

[Александр]

JohnAPI: Я прочитал вопрос правильно изначально. Я просто не могу понять зачем такое извращение...

[JohnAPI]

Это не извращение, а современные инструменты для разработки.
Почитайте ответы, готовое решение уже есть. Но нужно для Brackets или без Sublime.

[Serj-One]

JohnAPI:
>> "Это не извращение, а современные инструменты для разработки."
Изрядно повеселили. Это редкое извращение, с современными инструментами ничего общего не имеющее. Вам сказали уже не раз, верное решение Gulp + browserSync. Писать css в браузере не нужно, для этого есть редактор.