Compass (sass) и расширение для веб-разработчиков

Question

Часто я использую функциональность "edit css" в расширении веб-разработчика для редактирования своих таблиц стилей.

Это отличная функция, но требуется время, чтобы отредактировать CSS и скопировать его обратно в редактор, чтобы сохранить его.

Я планирую использовать Compass для моего следующего проекта, и мне интересно, какЯ могу использовать функциональность "edit css" с SASS / Compass.

Answer 1

Нет способа сделать это так, как вы ожидаете.

Поток должен работать следующим образом ->

Запись Compass / SCSS -> Обновить страницу -> Изменить CSS для получения результатов -> Повторно отредактировать SCSS с помощью предыдущего шага и / или скопировать / вставить.

Поскольку он компилируется, я не знаю ни одного решения, которое бы вернуло его обратно на уровень SCSS.

Answer 2

Теперь это возможно благодаря экспериментальной поддержке Sass в инструментах разработчика Chrome.

Сначала включите поддержку Sass:

Затем убедитесь, что вы компилируете что-либо, кроме сжатого, и включите отладочную информацию в Sass.Если вы компилируете из командной строки, передайте флаг --debug-info, если вы используете Compass, добавьте его в config.rb:

sass_options = { :debug_info => true }

Presto, у вас есть доступ к источнику Sassв инструментах разработчика:

Нажав на номер строки в инструментах разработчика, вы сможете редактировать и применять локальные изменения:

Лично я предпочитаю использовать compass watch в сочетании с LiveReload и редактировать в моем редакторе, но для тех из вас, кто любит редактировать в браузере, теперь вы можете редактировать файлы Sassнапрямую.

Не забудьте скомпилировать сжатый файл перед развертыванием.

Answer 3

Codekit

Codekit - отличный продукт для OSX, который позволит вам редактировать ваши локальные файлы, и когда вы нажмете «Сохранить», он автоматически вставит новую скомпилированную таблицу стилей в ваш браузер без обновления страницы, поэтому он будет хотя бы сэкономить тебе этот шаг. Тем не менее, пока нет ни одного аналога Windows, о котором я знаю.

Недавно я использовал Codekit в довольно большом проекте, где мы использовали SCSS, и это, безусловно, было полезно. К сожалению, как и вы, я привык к рабочему процессу панели инструментов веб-разработчика «Редактировать CSS», и мне еще предстоит найти точный перевод в мир SASS.

Web Putty

Еще один вариант, обладающий некоторым потенциалом (но с некоторыми СЕРЬЕЗНЫМИ недостатками), - это среда с открытым исходным кодом от Fog Creek, которая называется Web Putty . Это была услуга, которую они предложили, которая позволяла вам редактировать CSS в браузере, в том числе SASS и SCSS, но они остановили службу и просто открыли программное обеспечение с открытым исходным кодом, так что его настройка полностью на вас и требует довольно больших усилий (ЭТО недостаток).

Answer 4

Я не думаю, что это будет сильно отличаться от того, что вы делаете сейчас.

Compass прекомпилирует таблицу стилей, написанную с помощью Sass / SCSS, к тому времени, когда она достигнет, она станет обычной таблицей стилей.браузер, поэтому, если вы затем используете функцию «редактировать CSS» на панели инструментов браузера, она будет работать так же, как и сейчас, только вам нужно будет вернуться к файлу SASS / SCSS и вставить изменения в нужное место (например, это может быть вложенное правило, миксин или функция, в зависимости от того, как вы написали файл SASS / SCSS) - тогда Compass может перекомпилировать таблицу стилей