Назар Токар
Опубліковано: 17 Вересня 2015
Оновлено: 24 Грудня 2015

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.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. Алексей

    Подскажите нубу простым языком, уже который день бьюсь не могу понять логику. Система Mac OS X, установлена Koala. С сайтом работаю в онлайне, на сервере, на “живом” сайте в редакторе Coda 2, со встроенным FTP. Чтобы компилировать 1 файл (скажем template.less) и сохранять его как template.css в папке шаблона на самом сайте что нужно сделать? Как указать Коале путь к файлам по FTP? Или обязательно нужно скачивать весь проект? И тогда что является проектом: весь сайт, папка шаблона, папка с less файлами? Использую фреймворк Uikit, там сказано https://getuikit.com/docs/less#use-your-own-build-process. Заранее огромное спасибо.

  2. Андрей Фоменко

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

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

  3. Andrey

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

  4. Дмитрий

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

  5. Дамир

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

    1. Потому что поддержка у border-radius и так очень широкая.

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

    1. Назар Токарь

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

    2. Дамир

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

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

  7. Alexandr

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

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

  8. Coder

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

    1. Coder

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

  9. anxieter

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

    1. anxieter

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

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

    3. anxieter

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

  10. Сер

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

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

    2. Сер

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

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

  11. MansEL

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

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

  12. Hideo

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

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

    2. Hideo

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

  13. MansEL

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

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

    2. MansEL

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

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

  14. Пако

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

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