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

Question

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

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

Answer 1

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

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

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

Более подробную информацию можно найти на Chrome Dev инструменты блога: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

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

Answer 2

Если вы делаете выбор, который должен использовать, this article on css-tricks может заинтересовать вас.

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

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

SASS

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

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

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

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

МЕНЬШЕ/STYLUS

Как this tweet @jaketrent указывает на объясняет, есть прогресс на стороне отладки в хроме, но ничего не запеченный в еще и с учетом состояния МЕНЬШЕ GitHub он все еще может принять в то время как ... Оба решения основаны на бета-функции для поддержки отладки SASS в хроме, в основном добавляя ту же самую отладочную информацию, что и SASS.

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

Answer 3

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

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

div#awesome aside ul

так же легко, как найти:

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

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

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

Answer 4

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

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

Ex: $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, чтобы он выводил крючки, необходимые для запуска плагина.

Answer 5

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

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