Вирішили ви перейти з CSS на Sass, але виникло питання ≤Як компілювати Sass-файли в звичайний CSS?», то для цього є кілька методів, і зараз я розповім про найпростіший з них — програми 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, і це хороший момент почати його вивчати.

Налаштування 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.

Коменти

Алексей

Подскажите нубу простым языком, уже который день бьюсь не могу понять логику. Система 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. Заранее огромное спасибо.

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

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

Назар Токар

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

Andrey

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

Дмитрий

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

Дамир

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

Назар Токарь

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

Дамир

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

Назар Токарь

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

Дамир

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

Назар Токарь

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

Alexandr

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

Назар Токарь

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

Coder

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

Coder

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

anxieter

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

anxieter

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

Назар Токарь

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

anxieter

@Назар Токарь, элементарно, не сохранил в редакторе)) Зато сейчас столкнулся с тем, что при компиляции не поддерживает импорт фалов @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”, возможно, он отключён.

MansEL

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

Назар Токарь

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

Hideo

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

Назар Токарь

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

Hideo

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

MansEL

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

Назар Токарь

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

MansEL

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

Назар Токарь

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

Пако

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

Назар Токарь

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