—»     —»   Редактируем CSS-препроцессор в Google Chrome
  Раздел: CSS/Style Sheets   Нет комментариев  

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



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

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

Перед процессингом

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

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

Sass –v

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

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

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

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

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

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

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

Подключаем карту CSS-источников

В Chrome, откройте адрес chrome://flags, и выставите Enable Developer Tools на ‘enabled’. Затем перезагрузите Chrome.

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

Затем, перейдите к настройкам DevTool. Во вкладке General, поставьте галочку рядом с опциями Enable CSS Source Map и Auto-reload Generated CSS, как показано ниже:

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

Добавляем рабочую область

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

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

Откройте ваш проект в Chrome. На данном этапе вы заметите, что указанной на данный момент в DevTools таблицей стилей является файл в формате .scss, вместо .css, и она перенесет вас на панель Source, если вы по ней кликните.

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

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

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

Затем укажите исходный файл Sass.

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

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

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

В завершение

За счет этой добавленной функции у нас теперь есть возможность отлаживать и редактировать Sass без необходимости выходить из браузера. Однако на данный момент нужно выделить 2 основных вещи:

* На данный момент данная функция работает только в Sass. В будущем будут добавлены Compass, LESS и Stylus.
* Данное свойство будет работать только когда доступ к странице осуществлен посредством протокола http://
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Google Chrome, CSS, SASS
Опубликовал Design FactoRy   Прочитано (раз): 5726   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930