Обычные редакторы кода, такие, как PhpStorm, Brackets или SublimeText с компиляторами не очень дружны. Процесс инсталляции нетривиален и иногда заставляет помучаться даже опытных разработчиков. Дополнительные плагины, которые требуются для работы препроцессора, могут вызывать конфликты, чувствительны к номеру версии, иногда придётся выставлять тонкие настройки и лезть «в кишочки» к системе. Другим решением (и более грамотным) будет использование сборщиков, таких как Gulp, однако, они требуют уже более серьёзной квалификации.

Чтобы обойти эти проблемы, было предложено несколько программных продуктов, из которых наибольшую популярность получила Koala, в силу своей простоты и бесплатности. Давайте пробежимся по её возможностям.

Возможности

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

Программа имеет скромные размеры, около 100Мб. Потребление памяти и ресурсов процессора, разумеется, зависит от количества установленных проектов, однако, я бы сравнил её по ресурсоёмкости, например со Скайпом. Как и GoogleChrom, запускает несколько отдельных процессов, что хорошо видно в диспетчере. И чем больше проектов одновременно поддерживается – тем больше процессов.

Функционал, действительно, мощный:

  • Работа с препроцессорами SCSS, LESS и Compass;
  • Сборка одного CSS файла из нескольких импортируемых;
  • Компиляция CoffeeScript;
  • Минификация (сжатие) кода;
  • Автоматическая расстановка вендорных префиксов;
  • Несколько стилей вывода;
  • Работа с собственными библиотеками или с системными компиляторами на выбор.

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

Переходим к установке.

Установка

Скачать дистрибутив Koala можно здесь, посмотреть код и полистать гит-ветку здесь. Там же выложена и документация.

Сайт двуязычный (есть только английская и китайская версии), однако, сама программа поддерживает 12 языков, в том числе и русский (скажем за это спасибо переводчику Юрию Меркушину). Помимо основной «окошечной» версии, есть локализации для Linux и MacOS.

Скачивание и установка проблем не вызывает. Вы просто нажимаете большую зелёную кнопку с надписью «Download», закачиваете дистрибутив 80Мб на диск и запускаете. Не нужно ни регистрироваться, ни заполнять километровые анкеты, ни заводить учётные записи. При установке программа спросить, создавать ли иконку на рабочем столе и мини-иконку в трее – что вы решаете сами, по желанию. В остальном тоже ничего принципиально сложного нет, поэтому сразу можно переходить к работе.

Использование и настройки

Давайте запустим Koala и начнём работу над проектом. Для этого создадим папку проекта и в нём отдельную папку SCSS. Запишем туда файлы со следующим содержанием:

style.scss

@import "normalize";
@import "core";

_normalize.scss

* {
	margin: 0;
	padding: 0;
}

_core.scss

.conteiner {
	width: 80%;
	margin: 0 auto;
	&__flex {
		display: flex;
	}
}

Важно! Путь к папке проекта не должен содержать кириллических символов. Иначе компилятор может выдать ошибку.

Запускаем Koala и видим вот что.

Как видите, интерфейс у программы проще некуда. Слева три кнопочки – добавить проект, журнал и настройки. Справа большое окно проектов. Заглянем в настройки.

В основной вкладке можно выбрать язык. Далее переходим во вкладку SASS. Здесь по желанию можно указать принудительную расстановку автопрефиксов (1) и выбрать тип вывода (2). Их четыре, с разной степенью минификации.

Важно! Работоспособность может зависеть от того, будет ли программа формировать код с использованием собственной библиотеки или системного компилятора.

Конечно, проще, если Koala справится сама, и не придётся устанавливать ничего дополнительно. Однако, как показала моя практика, иногда встроенная библиотека не тянет (выдаёт ошибку «ArgumentError: Invalid byte sequence in UTF-8») – в таком случае нужно устанавливать компилятор глобально и заставлять программу использовать именно его.

Жмём крестик и добавляем нашу папку SCSS. Получаем вот что.

Чтобы появилась боковая панель справа, достаточно кликнуть по строке проекта. Как видим, в ней всё те же настройки, что мы уже видели, плюс появился чекбокс «автокомпиляция» и кнопка «compile».

Укажем путь для вывода файлов. Для этого щёлкнем по строке проекта правой кнопкой мыши и зададим путь к папке CSS. Тут программа ведёт себя немного странно – нужно не просто указать папку, а прямо задать конечный файл, куда будет собираться проект. В нашем случае style.css. Если путь не указывать, итоговый файл будет формироваться в то же папке, где лежат исходники.

После этого сверху появилась зелёная кнопка «обновить». Жмём. В папке CSS появились два файла — style.css и style.css.map. Если не появились (программа иногда задумывается – Коала, как-никак), то опять нажимаем на строку проекта левой кнопкой и в появившейся справа панели запускаем «compile».

Результат работы

Итак, поздравляю, вы пригласили Вия вот наш скомпилированный файл.

* {
  margin: 0;
  padding: 0; }

.conteiner {
  width: 80%;
  margin: 0 auto; }
  .conteiner__flex {
    display: flex;}

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

Добавим в исходник _core.scss, например, строку font-size: 16px; и включим автопрефиксы. Итоговый код поменялся:

* {
  margin: 0;
  padding: 0; }

.conteiner {
  width: 80%;
  margin: 0 auto; }
  .conteiner__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px; }

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

Можно поэкспериментировать с разными стилями вывода.

При режиме «expand» закрывающие скобки – } – будут не после точек с запятой, а переместятся на следующую строку. При режиме «compact» каждый класс займёт одну строчку, а свойства вытянутся в линию. Наконец, «compressed» соберёт весь код в единственную строку – идеальный вариант, если вы боретесь за скорость загрузки сайта.

Заключение

Koala – простой и интуитивно понятный инструмент для работы с препроцессорами SCSS и LESS. Он позволит добавить в ваш css-код вендорные префиксы, выполнит минификацию и сборку. А главное – выручит вас, если нет желания и сил тратить время, настраивая плагины под свой редактор кода.

Есть у программы и свои недостатки. Сообщество отмечало конфликты в среде Windows 10, проблемы с расстановкой автопрефиксов для свойств flex и даже сбои при работе со шрифтами от Гугла. Настораживает и то, что разработчики, похоже, охладели к своему детищу – последний релиз вышел в октябре 2017 года. Тем не менее, пока Koala вполне работоспособна и сможет вас порадовать.