Использование исходных карт для отладки Sass в Chrome

  1. Требования к браузеру и Sass
  2. Что такое исходная карта?
  3. Как помогают Source Maps?
  4. Включение исходных карт в плагинах node-sass
  5. Включение исходных карт с использованием драгоценного камня Sass Ruby
  6. Включение исходных карт с помощью Compass
  7. Включение исходных карт в Chrome
  8. Живое редактирование SCSS в браузере
  9. Отображение с локального хоста на файл на диске
  10. Заключение

Если вы используете Sass в своих интерфейсных проектах, скорее всего, ваши партиалы разделены в чистом и логичном ключе на основе надежного Sass архитектура ,

В таких случаях отладка скомпилированного CSS может быть как хлопотной, так и длительной. пререкаться предоставляет флаг включить номера строк (--line-numbers), которые включают в себя комментарии (как показано ниже) в вашем CSS.

/ * строка 303, молекулы \ аккордеоны \ _accordions.scss * /

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

Итак, как мы можем сделать этот процесс проще?

Я собираюсь показать вам, как использовать исходные карты в сочетании с Рабочие места Chrome чтобы вы могли отлаживать и редактировать Sass из браузера.

Требования к браузеру и Sass

Функция исходных карт привлекла большое внимание, когда она была впервые представлена, и с тех пор многое изменилось. Теперь он доступен в последних стабильных версиях Chrome, Firefox и Safari.

Вам не требуется Chrome Canary, и вам не нужно редактировать chrome: // flags, чтобы использовать это. Вам нужно только применить правильные настройки, чтобы включить его.

Для исходных карт требуется Sass 3.3 или выше ( Sass 3.4 был выпущен недавно).

Что такое исходная карта?

Исходная карта - это файл .map в формате JSON, который генерируется, когда ваши файлы Sass компилируются в CSS. Он содержит информацию, которая связывает каждую строку вашего CSS-файла (выходные данные) с соответствующей строкой в ​​его исходном файле SCSS (входные данные).

Это означает, что когда ваш CSS компилируется, вы увидите комментарий, подобный следующему, в конце вашего скомпилированного файла CSS:

/ * # sourceMappingURL = style.css.map * /

Ниже приведено содержимое усеченного файла .map.

{"version": 3, "mappings": "; AAiIA, qDAAsD; EACpD, OAAO, EAAE, GAAG" "sources": ["../scss/foundation/components/_breadcrumbs.scss","../scss /foundation/components/_icon-bar.scss","../scss/foundation/components/_offcanvas.scss","../scss/foundation/components/_visibility.scss","../scss/foundation/ components / _global.scss "," .. .. scss / foundation / pages / _index.scss "]," names ": []," file ":" foundation.css "}

Как помогают Source Maps?

При отладке веб-страницы с помощью инструментов разработчика Chrome с использованием исходных карт на панели стилей будет отображаться, с какой частью Sass пришел ваш CSS, вместо того, чтобы указывать на файл CSS. То есть вместо того, чтобы показывать источник как style.css, он будет отображаться как _buttons.scss.

В примере на скриншоте ниже стили для элемента body происходят из части с именем _body.scss.

scss

При проверке я хотел бы знать, где я определил цвет: черный участок в этом.

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

  1. Нажмите CTRL и нажмите на цвет слова. Он откроет соответствующий фрагмент на вкладке источников и поместит курсор в точную линию, где определен стиль. В этом случае цвет определяется в переменной с именем $ black.
  2. Нажмите CTRL и нажмите на слово черный . Он откроет _colors.scss на вкладке источников, где определено значение переменной $ black. В случае, если черный цвет исходил от миксина, а не от переменной, CTRL + нажатие на него откроет файл, в котором определен миксин. Нажмите на изображение ниже, чтобы посмотреть анимированный GIF это показывает демонстрацию того, как это может выглядеть.

Нажмите на изображение ниже, чтобы посмотреть   анимированный GIF   это показывает демонстрацию того, как это может выглядеть

Использование исходных карт в Workspaces позволяет редактировать и сохранять изменения в инструментах разработчика Chrome. Если sass --watch запущен, он обнаружит изменение и перекомпилирует CSS. Браузер автоматически перезагрузит этот новый CSS.

Включение исходных карт в плагинах node-sass

Все плагины node-sass имеют API для включения опции карты источника Sass.

  • grunt-contrib-sass - Включите исходные карты в разделе параметров вашего Gruntfile.js, чтобы установить sourcemap: true.

  • gulp - sass sourceComments: 'map' в gulp-sass включает исходные карты в Gulp. Это указывает на исходные карты, то есть они добавляются в конец вашего CSS-файла. В этом случае отдельного файла .map не будет.

  • broccoli- sass sourceMap: true активирует исходные карты.

Включение исходных карт с использованием драгоценного камня Sass Ruby

Если вы используете гем Sass Ruby для компиляции, вы можете включить исходные карты с помощью следующей команды терминала:

sass style.scss: ../ css / style.css --sourcemap

Включение исходных карт с помощью Compass

Если вы используете Compass, вы можете запустить следующую команду:

sass style.scss: ../ css / style.css --компас --sourcemap

Или вы можете добавить sass_options = {: sourcemap => true} в ваш файл config.rb и запустить Compass Watch как обычно.

Включение исходных карт в Chrome

Включение исходных карт скомпилирует карту со ссылками. Результатом этой компиляции будут два файла: файл .css и файл .css.map. Файл .map будет содержать соответствующие данные, чтобы вы могли отладить точное местоположение, где начинается стиль.

Чтобы это работало в Chrome, выполните следующие действия:

  1. Открытые инструменты разработчика.
  2. Нажмите на значок шестеренки (вверху справа), чтобы открыть Настройки.
  3. В разделе «Общие» найдите раздел «Источники». В этом разделе выберите «Включить исходные карты CSS».
  4. Убедитесь, что сопровождающий «Автоперезагрузка сгенерированного CSS» также включена.

Убедитесь, что сопровождающий «Автоперезагрузка сгенерированного CSS» также включена

Последний шаг помогает перезагрузить CSS при его изменении. Думайте об этом как о функции перезагрузки в реальном времени только для CSS.

Примечание. Вам все равно придется компилировать SCSS отдельно, используя Grunt, Gulp, sass watch или compass watch. Как только CSS будет сгенерирован, функция автоматически перезагрузит его для вас.

Живое редактирование SCSS в браузере

Включение Chrome Workspaces позволит вам сохранить (если вы хотите) изменения, которые вы вносите в ваши реальные файлы в веб-инспекторе Chrome. Таким образом, вам не нужно пробовать свои изменения в браузере, смотреть, что работает, а затем возвращаться к своему редактору, чтобы сохранить эти изменения.

Чтобы включить рабочие области в Chrome, выполните следующие действия.

  1. Откройте инструменты разработчика Chrome.
  2. Нажмите на значок шестеренки, чтобы открыть панель настроек.
  3. Выберите опцию «Рабочая область» в левой части панели «Настройки».
  4. Выберите корневую папку вашего проекта в разделе «Папки».
  5. Дайте Chrome разрешение на доступ к вашей локальной файловой системе.

Дайте Chrome разрешение на доступ к вашей локальной файловой системе

Это добавит все ваши файлы проекта на панель «Источники» в инструментах разработчика.

Отображение с локального хоста на файл на диске

Последний шаг для редактирования SCSS в браузере требует сопоставления файлов с локального хоста с исходными файлами. Выполнение следующих действий активирует это отображение:

  1. При просмотре страницы на вашем локальном сервере, проверьте любой элемент на вашей странице.
  2. В инструментах разработчика выберите вкладку Sources.
  3. В дереве файлов слева щелкните правой кнопкой мыши таблицу стилей и выберите «Сопоставить с ресурсом файловой системы…».
  4. Это вызовет диалог поиска файлов. Выберите соответствующий файл (вашу таблицу стилей).
  5. Перезапустите инструменты разработчика.

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

Если вы следите за изменениями в Sass, SCSS будет скомпилирован, и CSS автоматически обновится на вашей странице, включая ваши изменения.

Заключение

Исходные карты позволяют избежать хлопот переключения между редактором и инструментами разработчика. Он позволяет вам редактировать исходный SCSS напрямую и мгновенно видеть, как эти изменения выглядят в браузере.

Хотя эта статья посвящена работе с исходными картами в Chrome, вы можете сделать то же самое в Fire Fox , а также Сафари , Internet Explorer 11 также поддерживает исходные карты, но, похоже, нет никакой информации об использовании исходных карт в этом браузере с Sass, так что вам придется попробовать это самостоятельно.

Если вы хотите учиться визуально, проверьте SassBites # 21 от Мики Годболт , в котором обсуждается, как включить и использовать исходные карты в Chrome.

Я надеюсь, что это станет ценным, экономящим время дополнением вашего рабочего процесса.

Как помогают Source Maps?
Итак, как мы можем сделать этот процесс проще?
Что такое исходная карта?