0

Вопрос для экспертов SASS/SCSS.

Если в Google Chrome в инструментах разработчика на вкладке Sources добавить в Filesystem папку со скриптами (рис 1), то все изменения CSS вносимые на вкладке Elements (рис 2), моментально сохраняются в CSS на жёстком диске (рис 3).

вкладка Sources инструментов разработчика

изменения на вкладке Elements инструментов разработчика

откорректированный CSS-файл

Также все изменения можно наблюдать на вкладке Changes (рис 4).

изменения в инструментах разработчика

Если получаю CSS из SCSS с сохранением sitemap, то браузер видит все стили как будто бы они берутся из SCSS (рис 2). Но, изменения всё также сохраняются только в файле CSS (рис 3), при этом код SCSS остаётся без изменений (рис 5).

оригинальный файл SCSS остался без изменений

Можно ли заставить Chrome работать с SCSS также как и с CSS? Или есть более эффективные способы корректировки стилей?

1 ответ 1

4
+250

Все гораздо проще! Распишу алгоритм, как это работает...

  1. Сделали проект в котором руками создали styles.css, можно пустой;
  2. Загрузили проект в DevTools в закладке Sources;
  3. Открыли там styles.css;
  4. Во внешнем редакторе изменили и сохранили содержимое styles.css;
  5. DevTools должен автоматически увидеть изменения файла и перезагрузить его;

На этом этапе проверили, что DevTools "следит" за изменением. Если этого не происходит - ищем в сети хелп по настройке этого. Статей просто море, и нет смысла тут дублировать. По-умолчанию DevTools не генерирует sourcemap файл, а оно нам и не надо. Далее настраиваем sass-компилятор. Я советую Koala. Хотя проект и закрыт уже, но все, что нужно (по крайней мере мне) - в нем есть.

  1. Скачиваем, устанавливаем, открываем в нем проект, настраиваем автокомпиляцию и генерацию sourcemap;
  2. Тестируем. Для этого внесем изменения в файл styles.scss, и нажимаем Ctrl+S для сохранения файла;
  3. Наблюдаем - должна произойти автокомпиляция, должен перезаписаться styles.css, он должен автозагрузиться в DevTools, должен создаться sourcemap файл, (и если открыта нужная страница в браузере - зразу должны произойти изменения в ней).

Итог

Бинго! Одно нажатие Ctrl+S - и все отработало автоматом.

Замечания

  • Koala - имеет встроенные компиляторы, но можно и подключать внешние (допустим, более свежие, более свежего стандарта);
  • Koala - много чего умеет, в том числе сжимать результирующие файлы (min-версии)
  • Koala - капризничает, если в $HOME есть non-ASCII символы, но это решается, решение ниже.
!!! Не обязательно в C:/Users/Default/docker/.koala - куда пожелаете, главное, 
!!! чтобы в пути не было non-ASCII символов.

If you don't want to change you home folder name, try this:

Shut down the Koala. Move USER_HOME/.koala to C:/Users/Default/docker/.koala
use any path that is free of non ASCII chars.

in file C:\Program Files (x86)\Koala\app\scripts\FileManager.js

replace:
exports.userDataDir = path.join(process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'], (process.platform === 'darwin') ? 'Library/Application Support/Koala/UserData' :'.koala');

with:
exports.userDataDir = 'C:/Users/Default/docker/.koala';

in file C:\Program Files (x86)\Koala\app\scripts\pages\log.js
replace:
var errorLog = process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'] + '/.koala/error.log';

with:
var errorLog = 'C:/Users/Default/docker/.koala/error.log';
9
  • так суть не в автосохранении и компиляции, суть в том, чтобы менять стили на вкладке Elements. То есть, например, я зашел на страничку сайта, вижу элемент, который мне нужно исправить, нажимаю правой кнопкой мыши, и выбираю Inspect Element и вижу в DevTools сразу все стили, которые влияют на этот элемент и сразу могу отредактировать их (например, подобрать нужный цвет или подобрать толщину бордюра), и изменения стразу сохранятся в CSS, а в SCSS не сохранятся.
    – DiD
    20 ноя 2020 в 11:13
  • 1
    Это противоречит идее sourcemap! Карта указывает именно на источник, который *.scss. Нужно значит менять подход. Навскидку ... перед манипуляциями с *.css удалять из него информацию об источнике. Хотя стоп! По-моему в настройка DevTools где-то была настраиваемая опция "Использовать или нет sourcemap".
    – Majestio
    20 ноя 2020 в 11:34
  • Вот гипотетический пример. Захожу на сайт, вижу что у меня уехал вниз блок. Я инспектирую элемент, вижу, что надо убавить margin (причем, заранее не знаю на сколько), ставлю курсор на нужное значение margin, перемещаю взгляд на блок, и стрелочками вверх-вниз изменяю размер margin пока блок не встанет на место. Каждое нажатие на клавишу имеет моментальный отклик. При этом, изменяя значение, я могу не смотреть на значение, а смотреть на сам элемент. В случае с редактированием значения в коде, это вряд ли получится, там надо стереть значение, вписать новое, сохраниться, подождать обновления
    – DiD
    20 ноя 2020 в 11:51
  • 1
    Почему нельзя сохранить? Как раз таки можно выбрать локальную копию CSS на удаленный работающий сайт. посмотрите это видео youtube.com/watch?v=VYyQv0CSZOE
    – DiD
    20 ноя 2020 в 21:54
  • 1
    Также есть расширение под все модные браузеры github.com/openstyles/stylus и целый сайт с пользовательскими стилями: userstyles.org (сайт может находиться под DDOS-атакой).
    – DiD
    21 ноя 2020 в 13:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.