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

Как вы делаете ремонт на CSS встроенный менее/Сасс?

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

59
css less sass 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-трюках может быть вам интересно.

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

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

Сасс

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

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

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

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

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

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

28

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

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

div#awesome aside ul

Как найти:

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

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

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

1

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

  • включить оба .sass и the .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