Обзор программы Koala

16.01.2017

Теги: CSSWeb-разработкаВерстка

Решили перейти с CSS на SASS, но возник вопрос «Как компилировать SASS-файл в обычный CSS?». Для этого есть несколько методов, и самый простой из них — использовать программу Koala. Это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

Возможности

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

Интерфейс

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

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

Настройка SASS

Посмотрим на вкладку с настройками SASS. За пару кликоы Koala начнет отслеживать SASS-файлы и автоматически компилировать их в CSS, никаких дополнительных действий не требуется.

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

Autoprefix — это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий. Например, для закругления углков достаточно написать:

.pager {
    border-radius: 3px;
}

После работы autoprefix:

.pager {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

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

Вместо заключения

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

Поиск: CSS • Web-разработка • Верстка • Less • Sass • Koala

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.