Меньше / Sass отладки в Chrome Dev Tools / Firebug [закрыто]

Как вы, ребята, делаете обслуживание на CSS, построенном с помощью Less / Sass?

одна из вещей, которые мне нравятся в Dev Tools/Firebug, - это возможность видеть номер строки стиля css. Есть ли хороший способ сделать это с помощью препроцессоров CSS, кроме необходимости вручную искать через.менее./SCSS файл, чтобы найти код, который я хочу изменить?

5 59
css sass less.js source-maps

5 ответов:

Chrome Developer Tools теперь поддерживает отладку Sass из коробки.

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

  1. убедитесь, что у вас есть Sass 3.3.x
  2. скомпилируйте свой Sass с помощью --sourcemap флаг.
  3. в Chrome/IUM DevTools открыть параметры и нажмите кнопку "общие".
  4. включите "включить исходные карты CSS".

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

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

32

Если вы делаете выбор относительно того, что вы должны использовать,в данной статье на CSS-уловок, которые может быть вам интересно.

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

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

Сасс

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

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

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

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

меньше/стилус

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

28

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

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

div#awesome aside ul

Как найти:

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

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

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

1

несколько советов:

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

Ex: $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

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

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

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

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

1

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

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

1