Вирішили ви перейти з 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.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Алексей

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

Пако

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

Назар Токарь

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