Меньше/Sass отладки в Chrome Dev Tools/Firebug

Ответ 1

Chrome Developer Tools теперь поддерживает отладочную отправку Sass.

Обновлено для включения исходных карт:
Предыдущие версии использовали встроенный комментарий в вашем css для предоставления ссылки на исходный код (см. Ниже инструкцию). последние версии sass (3.3+) и хром (31+) используют для этого исходные карты:

• Убедитесь, что у вас есть Sass 3.3.x
• Скомпилируйте свой Sass с флагом --sourcemap.
• В Chrome/ium DevTools откройте настройки и нажмите кнопку "Общие".
• Включите "Включить исходные карты CSS".

Дополнительная информация доступна в блоге инструментов Chrome dev: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Старые версии:
 1. Сначала вы должны скомпилировать свой Sass с помощью --debug-info.
 2. В Chrome/ium перейдите к: flags
 3. Включить эксперименты с инструментами для разработчиков
 4. В вашем инспекторе (F12) откройте "Настройки", затем перейдите на вкладку "Эксперименты"   и проверьте "Поддержка SASS".

Ответ 2

Если вы делаете выбор в отношении того, что вы должны использовать, эта статья о css-трюках может вас заинтересовать.

Я пришел к выводу, что использование LESS или SASS имеет больше преимуществ, чем недостатки. Хотя это, безусловно, недостаток, я могу только предложить вам структурировать ваши файлы, поэтому любые стили, которые вы ищете, легко найти с помощью других ссылок, вот несколько вещей, которые вы можете сделать:

• Области документов вашей таблицы стилей; т.е. /* General */, /* Header */ и /* Footer */
• Используйте логические и разумные имена для классов, которые вы можете быстро распознать (и не числяйте их как error1-error10 или что-то еще)
• Научитесь анализировать селектора классов/элементов/идентификаторов и подумайте о том, как/где вы их написали.
• Используйте CTRL + F, часто точный атрибут или один рядом с ним довольно легко найти таким образом

SASS

Теперь есть способ отладить SASS в firefox, используя расширение, которое читает и отображает sass файлы в инспекторе Firebug. Чтобы использовать, установите расширение и включите соответствующие флаги отладки.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Изменить: с 2014-07-06 этот плагин больше не доступен для загрузки. FireSass прекращен.

версии Chrome/Webkit появляются в сети, а в Chrome используется функция бета-версии, чтобы добавить поддержку для отладки SASS. Он основан на той же отладочной информации, которая используется в версии firefox. Не смогли судить ни одного из них должным образом, но пока не нашли того, что принято публиковать как плагин для работы на момент написания этой статьи.

МЕНЬШЕ/ STYLUS

Как этот твит @jaketrent указывает на объяснения, есть прогресс на стороне отладки в хроме, но ничего не запекалось еще и учитывая состояние LESS github, это может занять некоторое время... Оба решения основаны на бета-функции для поддержки отладки SASS в хроме, в основном добавляя ту же самую отладочную информацию, что и SASS.

• https://github.com/cloudhead/less.js/pull/1038
• https://github.com/LearnBoost/stylus/pull/886

Ответ 3

У меня редко возникают проблемы с обслуживанием/отладкой в ​​LESS - мы всегда компилируем на конец сервера и ссылаемся только на файл CSS на странице HTML. Это делает так, что всегда существует взаимно однозначное соответствие веб-странице и файлу на диске.

И затем, когда мне нужно отредактировать LESS файл, я нахожу, что LESS, так как его очень большая надбавка CSS +, довольно легко вернуть все, что я запутался в исходном заявлении в CSS. Если это mixin, это довольно очевидно (поскольку я обычно использую mixins для предотвращения повторного использования всего префикса поставщика), а затем это просто логическая иерархия, поскольку мы используем функцию вложения классов, поэтому находим:

div#awesome aside ul

так же просто, как найти:

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

(хотя мы стараемся не углубляться более чем на 3 слоя)

У меня нет реального опыта работы с SASS, но мне не понравилось, насколько далеки от CSS, когда я впервые посмотрел на него несколько лет назад (и не вернулся с тех пор...)

Ответ 4

Некоторые советы:

• Включите файлы .sass и .css в управление версиями. Таким образом, у всех самые последние изменения.
• Если вы упорядочиваете таблицы стилей в логических областях, обслуживание - легкий ветерок.
• Также: попробуйте использовать менее трех основных цветов, а затем используйте цветовые функции SASS для их изменения и сохранения результатов в переменных, которые можно повторно использовать во всем своем проекте/теме.

Пример: $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

Таким образом, вам нужно поддерживать только один цвет. А остальное будет пересчитано.

До недавнего времени не было инструментов для отладки SASS в браузере.

Теперь есть плагин Firefox FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

В вашей команде sass --watch добавьте -g для --debug-info, чтобы он выводил крючки, необходимые для запуска плагина.

Ответ 5

Я переключился с меньшего на sass, из-за firesass. С этим вы получаете оригинальную линию sass в firebug.

установите firesass, если вы используете sass