Установка koala на Ubuntu

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

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

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

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

Интерфейс

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

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

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

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

В настройках есть приятные вещи. Возьмем вкладку с настройками 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;

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

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

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

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

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

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

Установка

Качаем пакеты с оф сайта – https://koala-app.com

Если не запускается на ubuntu – ФИКСИМ

Для 64 bit версии

ln -sf /lib/x86_64-linux-gnu/libudev.so.1 /lib/x86_64-linux-gnu/libudev.so.0

Для 32-bit версии

ln -sf /lib/i386-linux-gnu/libudev.so.1 /lib/i386-linux-gnu/libudev.so.0