Update 2015-12-24: в Koala добавлен русский язык.

Решили вы перейти с CSS на Sass, но возник вопрос “Как компилировать Sass-файлы в обыкновенный CSS?”, то для этого есть несколько методов, и сейчас я расскажу о самом простом из них — программе Koala. 

Koala — это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

Программа бесплатна и живет на благотворительные пожертвования. Впрочем, когда я попытался перевести ребятам на Paypal немного денег пару лет назад, сделать этого не получилось. Разработчики находятся в Китае, а Paypal там работает только на отправку денег. Тем не менее, программа от этого хуже не стала. Разберемся подробнее.

Преимущества

  • Поддержка нескольких языков: Koala работает с Less, Sass (*.scss), CoffeeScript и фреймворком Compass. Кроме того, она может компилировать и обыкновенные CSS и JS, не связанные с препроцессорами.
  • Компиляция в реальном времени: Koala отслеживает изменения файлов и автоматически компилирует их. Все действия происходят в фоновом режиме и не требуют вмешательства разработчика.
  • Настройка компиляции: Можно указывать разные компиляторы для каждого выбранного файла. Впрочем, это вам вряд ли понадобится.
  • Компрессия: Koala умеет автоматически сжимать код после компиляции. Эту функцию по желанию можно не использовать.
  • Сообщения об ошибках: Если программа встретила ошибку в коде при компиляции, она покажет уведомление. Если ошибок нет, просто будет пересоздан результирующий файл.
  • Кроссплатформенность: Koala работает на Windows, Mac и Linux.

Интерфейс

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

koala sass главное окно

Основные элементы управления всегда на виду. Вот для чего они нужны:

Koala окно c настройками

При переключении типов файлов из общего списка останутся только файлы выбранного типа.

Настройки Sass и LESS

В настройках есть приятные вещи. Возьмем вкладку с настройками Sass:

koala настройки sass

В два клика Koala начнет сохранять ваши Sass-файлы в CSS, никаких дополнительных плагинов устанавливать для Sass не потребуется.

Koala умеет автоматически добавлять кроссбраузерные префиксы для css-свойств, сохранять комментарии. В типе файла CSS я всегда рекомендую выбирать compressed, так его вес будет минимальным, а для удобства разработки оставлять включенными Source maps.

Автопрефиксы — это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий.

Например, для скругления углов в 3 пикселя вам будет достаточно написать:

border-radius: 3px;

…а после работы автопрефикса получите:

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

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

koala настройки файла

Кстати, с 4-й версии Bootstrap перешел с LESS на Sass, и это подходящий момент начать изучать Sass.

Настройки JavaScript и CoffeeScript

Для JS есть всего две настройки:

  1. Compress — всегда включайте, чтобы полученный js-файл сжимался.
  2. Preserve copyright comments

Для CoffeeScript в 99% случаев вы оставите настройки по умолчанию, поэтому останавливаться на них нет смысла.

Где скачать

Скачивайте программу с официального сайта разработчиков — koala-app.com. Там есть отдельные ссылки для Linux, Mac, Ubuntu.

В итоге

В итоге я могу назвать Koala самым простым и правильным решением для разработчика, кому не нужны сложные настройки и функции. Если вам для работы нужен графический интерфейс, компиляция только Sass/Less/CSS и нежелание копаться в командной строке, тогда Koala — ваш выбор.

Я уже писал о том, что такое Sass, и как он упрощает жизнь разработчикам. Рекомендую ознакомиться, это очень удобно.

Koala хорошо подходит для начинающих разработчиков или тех, кто делает небольшой проект и не хочет разворачивать полную версию Gulp или Grunt.js.

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

33 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією
Андрей Фоменко

KOALA не корректно компилирует русские символы и sass в css.

есть ли решение?

Автор
Назар Токар

А де в CSS є кирилиця? В коментарях?

Оказывается, что руби не нужно изучать. Ура!

KOALA выдаёт ошибку если в коде присутствуют русские символы (комментарии на русском). После их удаления всё работает. Кто с этим сталкивался и как это исправить?

сейчас у меня коала почему-то не создаёт префиксы для "border-radius" а вот для "display: flex;" создаёт

Автор
Назар Токар

Потому что поддержка у border-radius и так http://caniuse.com/#feat=border-radius" rel="nofollow">очень широкая.

в коале появился русский язык

Автор
Назар Токар

Не вижу такого. Да и на репозитории тишина. Может, форк какой-нибудь?

Не до конца переведен, вчера скачал коалу, залез в "Настройки > Основные > Язык (внизу в списке есть русский)"

Автор
Назар Токар

Точно, есть. Но да, перевели только часть.

Подскажите куда копнуть, чтобы при добавлении проекта, она автоматически не компилировала less? Я знаю, что после добавления папки, можно отключить авто компиляцию, но дело в том, что программа компилит less сразу же после добавления проекта. Это немного напрягает, так как я не хочу, чтобы компилировались все файлы. Заранее спасибо)

Автор
Назар Токар

@Alexandr, отключайте ненужный препроцессор, например. Или отключайте автокомпиляцию и удаляйте сегенированные файлы.

Хотелось бы узнать. Кто то сталкивался с тем что не удается подключить 'sass-globbing' в config.rb. Вернее Koala выдает ошибку что этот модуль не установлен. Хотя он установлен чистый компас находит его без проблем.

Нашел способ. Если кому то интересно. Нужно установить sass-globbing в директорию ruby. И выставить в настройках "Advanced" - "Использовать Ruby" и в настройках "Compass" - "Использовать системный компилятор Compass". И подключить через require в config.rb

Здравствуйте. У меня почему-то Koala скомпилировала пустой CSS файл. Исходник - LESS с небольшим кодом. После команды скомпилировать в той же папке появляется CSSник, но при открытии он пустой!!!
Может что-то стало конфликтовать, так как до этого пытался поработать в Grunt.

просьба удалить, разобрался))

Автор

Напишите, в чем было дело :)

@Назар Токарь, элементарно, не сохранил в редакторе)) Зато сейчас столкнулся с тем, что при компиляции не поддерживает импорт фалов @import "file.less" и выдает ошибки при ссылке переменной на переменную @style: @style Только WinLESS такое потянул. Очень жаль, возлагал на эту программу надежды в освоении препроцессоров.

Назар, помогите решить вопрос, который Вы, наверное, давно решили - как в fireBug firefox увидеть source Map, сгенерированный Coala ?
Чтобы сразу найти нужную строчку в scss файле.

Автор
Назар Токар

Как и везде, открывайте инспектор элементов и смотрите. Или Firebug.

@Назар Токарь, в том и проблема, что Firebug показывает только стили из main.css ... при этом файл main.css.map создается... а в файле main.css появляется строка /*# sourceMappingURL=main.css.map */
Спасибо!

Автор
Назар Токар

@Сер, поищите чекбокс "Use source maps", возможно, он отключён.

Попробовал. Увы... Koala выдает ошибку при попытке компиляции less фала, если переписать стандартные файлы less в Koala на новые. "Дедушкин" опыт и мудрость нужны :-)

Автор
Назар Токар

@MansEL, я с таким не сталкивался, поэтому не знаю :). Попробуйте почитать FAQ на их сайте или задать вопрос в поддержку.

Не плохая программа, безусловно выделяется тем, что бесплатная, собственно как и scout. Пользовался koala некоторое время (для cs) но вот с sass были проблемы, он почему то не хотел компилировать scss, в итоге перешел на prepros (хоть и платная, но вполне себе можно бесплатно юзать)

Автор
Назар Токар

@Hideo, а какие проблемы? У меня всегда компилирует как надо.

@Назар Токарь, Даже не знаю, он просто не находил файл формата scss

Хорошая статья, большое спасибо.

Есть вопрос по Koala: как обновить версию Less (до 2.5.3) ?? Текущая версия less =1.7 в koala версии 2.04 под Windows.

Автор
Назар Токар

@MansEL, думаю, для этого нужно поставить через командную строку системный компилятор нужной версии и в настройках проекта указать к нему путь во вкладке с LESS.

@Назар Токарь, За ответ спасибо, но может есть вариант без системного компилятора. Файлы в папке less у программы Koala, очень напоминают структуру папок less на https://github.com/less/less.js. Может, есть вариант перезаписью этих файлов? Не мог бы Дедушка :-) поискать вариант обновления less без установки системного компилятора в помощь внучикам :-) Да и установка системного компилятора, немного, нарушает идею "ленивой" Koola-ы все включено в пакет.

Автор
Назар Токар

@MansEL, так попробуйте заменить, я же за вас этого не сделаю.

Спс чувак, давно ещё скачал коалу и пробовал работать с ней, но потом забил, а тут как раз твой обзорчик подвернулся под руку.

Автор
Назар Токар

@Пако, ну, она такая простая и удобная, что почему бы и нет :)