Как скомпилировать Sass с возвышенным текстом

В предыдущем посте из нашей серии Sass мы показали, как скомпилировать Sass в обычный формат CSS с помощью командной строки. Однако, поскольку не всем может понравиться работа с терминалом, это подсказка о том, как вы можете сделать то же самое, используя Sublime Text.

Компиляция Sass в CSS в Sublime Text возможна с помощью плагина под названием SassBuilder, который вы можете установить через Контроль пакетов (см. скриншот).

Рекомендуемое чтение: Начало работы с Sass: установка и основы

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

Файл конфигурации

Прежде чем вы сможете скомпилировать Sass, вам нужно создать файл конфигурации, который похож на файл config.rb, который вы можете найти в Компас проект. Чтобы создать файл, перейдите в Инструменты> Конфигурация Sass Builder в Sublime Text. Сохраните файл в той же папке, где вы храните файлы .scss или .sass, и назовите его .sassbuilder-config.

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

{
“output_path”: “../css”,
“параметры”: {
«кеш»: правда,
“отладка”: правда,
“line-comments”: правда,
“номера строк”: правда,
“стиль”: “вложенный”
}
}

SassBuilder сгенерирует комментарии и номера строк, которые сообщат нам, где были определены селекторы и правила стиля. Они полезны, когда вы находитесь на стадии разработки, но когда вы собираетесь опубликовать сайт, вам, вероятно, придется удалить их. Чтобы сделать это, установите значение в строке-комментарии и номер строки в false, например, так.

{
“output_path”: “../css”,
“параметры”: {
«кеш»: правда,
“отладка”: правда,
“line-comments”: ложь,
«номера строк»: ложь,
“стиль”: “сжатый”
}
}

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

И это все, ребята. Мы надеемся, что вы нашли этот небольшой учебник полезным. Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь размещать их в комментариях ниже.