Редактирование CSS-препроцессора в Google Chrome

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

Google представил экспериментальную функцию, начиная с Google Chrome 29, для увеличения рабочего процесса при отладке и редактировании CSS-препроцессора. Давайте посмотрим, как работает эта функция.

Рекомендуемое чтение: CSS препроцессоры по сравнению: Sass Vs. МЕНЬШЕ

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Перед продолжением

Прежде всего, нам нужно установить Sass 3.3 с поддержкой этой функции из Chrome.

Чтобы увидеть версию Sass, установленную на вашем компьютере, вы можете запустить следующую командную строку через Терминал.

sass -v

В этом случае, как вы можете видеть ниже, у меня есть Sass 3.2.7.

Чтобы установить Sass 3.3, выполните следующую команду gem install sass -v ‘> = 3.3.0alpha’ –pre.

Затем перейдите в каталог проекта и запустите sass –watch –sourcemap scss / styles.scss: styles.css, чтобы отслеживать изменения в файлах и создать исходная карта, который Chrome может использовать для ссылки на файл Sass.

Не забудьте заменить каталог и имя файла своим собственным.

Включить исходную карту CSS

В Chrome перейдите к chrome: // flags и установите для экспериментов Enable Developer Tools значение «enabled». И перезапустите Chrome.

Затем перейдите в настройки DevTool. На вкладке «Общие» установите флажок «Включить исходную карту CSS» и автоматически перезагрузить сгенерированный CSS, как показано ниже:

Добавление рабочего пространства

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

Откройте свой проект в Chrome. На этом этапе вы заметите, что styleheest, который связан с DevTools, теперь .scss вместо .css, и при нажатии на него вы попадете на панель Source.

Последний шаг, который нам нужен, – связать источник с тем, который мы добавили в рабочую область. Для этого щелкните правой кнопкой мыши и выберите Map to Resource File System…

Затем выберите исходный файл Sass.

Теперь вы сможете отлаживать и редактировать Sass через Google Chrome. Сохраните изменения, и результат будет мгновенным, как вы можете увидеть в следующем анимированном GIF. Изменения, кроме того, влияют как на файл Sass / SCSS, так и на CSS.

Последняя мысль

Благодаря этой дополнительной функции мы теперь можем отлаживать и редактировать Sass, не выходя из браузера. Однако на данный момент следует отметить две основные вещи.

На данный момент эта функция работает только для Sass. Compass, LESS и Stylus будут добавлены в будущем.
Эта функция работает только при доступе к странице через протокол http: //.