Программа koala что это

Koala: простое решение для использования препроцессоров SASS и LESS

Обычные редакторы кода, такие, как PhpStorm, Brackets или SublimeText с компиляторами не очень дружны. Процесс инсталляции нетривиален и иногда заставляет помучаться даже опытных разработчиков. Дополнительные плагины, которые требуются для работы препроцессора, могут вызывать конфликты, чувствительны к номеру версии, иногда придётся выставлять тонкие настройки и лезть «в кишочки» к системе. Другим решением (и более грамотным) будет использование сборщиков, таких как Gulp, однако, они требуют уже более серьёзной квалификации.

Чтобы обойти эти проблемы, было предложено несколько программных продуктов, из которых наибольшую популярность получила Koala, в силу своей простоты и бесплатности. Давайте пробежимся по её возможностям.

Возможности

Работает она так – вы запускаете программу, указываете исходную папку, в которой лежит код, написанный с применением препроцессора и конечную папку, в которой будет компилироваться файл CSS.

Компиляция Sass SCSS программой Koala

Программа имеет скромные размеры, около 100Мб. Потребление памяти и ресурсов процессора, разумеется, зависит от количества установленных проектов, однако, я бы сравнил её по ресурсоёмкости, например со Скайпом. Как и GoogleChrom, запускает несколько отдельных процессов, что хорошо видно в диспетчере. И чем больше проектов одновременно поддерживается – тем больше процессов.

Функционал, действительно, мощный:

• Работа с препроцессорами SCSS, LESS и Compass;
• Сборка одного CSS файла из нескольких импортируемых;
• Компиляция CoffeeScript;
• Минификация (сжатие) кода;
• Автоматическая расстановка вендорных префиксов;
• Несколько стилей вывода;
• Работа с собственными библиотеками или с системными компиляторами на выбор.

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

Переходим к установке.

Установка

Скачать дистрибутив Koala можно здесь, посмотреть код и полистать гит-ветку здесь. Там же выложена и документация.

Сайт двуязычный (есть только английская и китайская версии), однако, сама программа поддерживает 12 языков, в том числе и русский (скажем за это спасибо переводчику Юрию Меркушину). Помимо основной «окошечной» версии, есть локализации для Linux и MacOS.

Скачивание и установка проблем не вызывает. Вы просто нажимаете большую зелёную кнопку с надписью «Download», закачиваете дистрибутив 80Мб на диск и запускаете. Не нужно ни регистрироваться, ни заполнять километровые анкеты, ни заводить учётные записи. При установке программа спросить, создавать ли иконку на рабочем столе и мини-иконку в трее – что вы решаете сами, по желанию. В остальном тоже ничего принципиально сложного нет, поэтому сразу можно переходить к работе.

Koala — простая компиляция Sass

Использование и настройки

style.scss

_normalize.scss

_core.scss

.conteiner < width: 80%; margin: 0 auto; display: flex; >>

Важно! Путь к папке проекта не должен содержать кириллических символов. Иначе компилятор может выдать ошибку.

Запускаем Koala и видим вот что.

Как видите, интерфейс у программы проще некуда. Слева три кнопочки – добавить проект, журнал и настройки. Справа большое окно проектов. Заглянем в настройки.

В основной вкладке можно выбрать язык. Далее переходим во вкладку SASS. Здесь по желанию можно указать принудительную расстановку автопрефиксов (1) и выбрать тип вывода (2). Их четыре, с разной степенью минификации.

Важно! Работоспособность может зависеть от того, будет ли программа формировать код с использованием собственной библиотеки или системного компилятора.

Конечно, проще, если Koala справится сама, и не придётся устанавливать ничего дополнительно. Однако, как показала моя практика, иногда встроенная библиотека не тянет (выдаёт ошибку «ArgumentError: Invalid byte sequence in UTF-8») – в таком случае нужно устанавливать компилятор глобально и заставлять программу использовать именно его.

Жмём крестик и добавляем нашу папку SCSS. Получаем вот что.

Чтобы появилась боковая панель справа, достаточно кликнуть по строке проекта. Как видим, в ней всё те же настройки, что мы уже видели, плюс появился чекбокс «автокомпиляция» и кнопка «compile».

Укажем путь для вывода файлов. Для этого щёлкнем по строке проекта правой кнопкой мыши и зададим путь к папке CSS. Тут программа ведёт себя немного странно – нужно не просто указать папку, а прямо задать конечный файл, куда будет собираться проект. В нашем случае style.css. Если путь не указывать, итоговый файл будет формироваться в то же папке, где лежат исходники.

После этого сверху появилась зелёная кнопка «обновить». Жмём. В папке CSS появились два файла — style.css и style.css.map. Если не появились (программа иногда задумывается – Коала, как-никак), то опять нажимаем на строку проекта левой кнопкой и в появившейся справа панели запускаем «compile».

Результат работы

Итак, поздравляю, вы пригласили Вия вот наш скомпилированный файл.

* < margin: 0; padding: 0; >.conteiner < width: 80%; margin: 0 auto; >.conteiner__flex < display: flex;>/*# sourceMappingURL=style.css.map */

Добавим в исходник _core.scss, например, строку font-size: 16px; и включим автопрефиксы. Итоговый код поменялся:

* < margin: 0; padding: 0; >.conteiner < width: 80%; margin: 0 auto; >.conteiner__flex < display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; >/*# sourceMappingURL=style.css.map */

Можно поэкспериментировать с разными стилями вывода.

При режиме «expand» закрывающие скобки – > – будут не после точек с запятой, а переместятся на следующую строку. При режиме «compact» каждый класс займёт одну строчку, а свойства вытянутся в линию. Наконец, «compressed» соберёт весь код в единственную строку – идеальный вариант, если вы боретесь за скорость загрузки сайта.

Заключение

Koala – простой и интуитивно понятный инструмент для работы с препроцессорами SCSS и LESS. Он позволит добавить в ваш css-код вендорные префиксы, выполнит минификацию и сборку. А главное – выручит вас, если нет желания и сил тратить время, настраивая плагины под свой редактор кода.

Есть у программы и свои недостатки. Сообщество отмечало конфликты в среде Windows 10, проблемы с расстановкой автопрефиксов для свойств flex и даже сбои при работе со шрифтами от Гугла. Настораживает и то, что разработчики, похоже, охладели к своему детищу – последний релиз вышел в октябре 2017 года. Тем не менее, пока Koala вполне работоспособна и сможет вас порадовать.

Источник: avavax.ru

Koala — быстрая компиляция Sass.

В этой статье мы поговорим о программе Koala, которая позволяет очень быстро и легко компилировать Sass, используя графический интерфейс.

Если вы перейдете на страницу установки на официальном сайте Sass, то слева сможете найти список программ, в числе которых будет и наша. Именно Koala предпочитает большинство разработчиков, поскольку она является открытой(open source), бесплатной, а также легкой в использовании. Помимо всего прочего, она может работать под управлением операционных систем Mac, Windows и Linux.

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

Какие у Koala особенности?

• Поддержка различных языков(Less, Sass, CoffeeScript, Compass Framework)
• Компиляция в реальном времени(прослушивает файлы и компилирует их автоматически, если есть изменения)
• Позволяет настраивать опции компиляции для каждого файла
• Поддерживает создание глобального конфигурационного файла
• Уведомление об ошибках(если что-то пойдет не так во время компиляции, Koala сообщит вам об этом)
• Кроссплатформенная

После того, как вы скачали и установили программу, запустите ее. Перенесите в открывшееся окно программы папку вашего проекта. Вы должны увидеть ваши css и sass файлы, которые Koala автоматически определит и выведет. Если вы нажмете на файл, то справа выедет боковая панель, где вы можете выполнить различные настройки.

Если же вы нажмете на файл правой кнопкой мыши, то у вас появится окошко, где есть другие команды. Например, вы можете выбрать Open Output Folder, чтобы увидеть, куда будут компилироваться ваши Sass файлы, а также изменить это значение.

На самом деле, основную функцию(компиляцию) мы с вами разобрали, однако в программе есть и другие возможности. Как пример, вы можете установить галочку в пункте Autoprefix, чтобы ко всем css3 свойствам автоматически добавлялись нужные префиксы. Если вы хотите почитать про это подробнее, то вы можете сделать это в документации.

А у меня на этом все. Спасибо за внимание!

Создано 29.12.2015 23:00:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Scretch 12.03.2016 13:17:35

Здравствуйте, очень познавательно, особенно про Autoprefix. На самом деле пользуюсь этим компилятором постоянно, но недавно столкнулся с такой проблемой. Как правильно настроить компиляцию через компилятор Koala, проектов с уже подключенным Compass? Есть ли какие уроки или информация по этому поводу, подскажите пожалуйста.

В интернете ничего умного я не нашёл, как компилировать через cmd это понятно. Но хотелось бы автоматизировать процесс полностью. И возможно ли это, или есть какой другой эффективный способ? Заранее спасибо.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник: myrusakov.ru

Инструкция по SCSS

HTML, CSS

На чтение 10 мин Просмотров 13.1к. Опубликовано 03.03.2021

SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. С ним можно использовать переменные, вложенные селекторы и медиазапросы, собирать несколько файлов в один, миксины, наследования и другие полезные вещи которые упростят и структурируют работу с CSS кодом. В этой статье мы будем говорить о SCSS. О его различии с Sass будет сказано немного ниже.

Что такое SCSS

SCSS это отдельный формат файла, в котором пишутся стили для сайта. Он очень похож на CSS, но в добавок имеет множество улучшений. Буквально SCSS расшифровывается как Super CSS — то есть CSS c супер-силой.

SCSS пишется в отдельных файлах с расширением .scss , например main.scss .

SCSS не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.

Для того чтобы скомпилировать SCSS в CSS нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.

На начальном этапе я рекомендую собирать SCSS именно специальными программами, в частности Koala, я вижу это как лучшее решение для старта. Такие программы просты в установке и использовании. Плагины в редакторах — всегда требуют дополнительной настройки от проекта к проекту, могу конфликтовать с другими плагинами. Сборщики вроде Gulp и других — хорошее решение, но подходят для профессионалов, так как требуют дополнительной настройки и ряда дополнительных технологий (npm , node js).

Особенности SCSS

• Это отдельный формат файла
• Пишется в отдельных файлах с расширением .scss
• SCSS не подключается в браузер напрямую
• SCSS надо компилировать в CSS
• Дает возможность использовать переменные, вложенные селекторы и медиазапросы, собирать несколько файлов в один, миксины, наследования и многое другое чтобы структурировать работу с CSS кодом

Отличие Sass от SCSS

Sass и SCSS очень похожи, но в них есть пару различий. Sass не использует точки с запятой и не имеет фигурных скобок. Вложенность в Sass определяется отступами.

Пример SCSS кода:

body

Пример Sass кода:

body font-family: sans-serif font-size: 18px

Далее мы продолжим разбирать SCSS синтаксис.

Настройка Windows для программы Koala

Дело в том что программа Koala которую мы будем использовать для компилирования SCSS не работает с русскими символами, если они будут встречаться в пути к имени вашего проекта. Например такой путь к проекту C:/Users/Юрий/Рабочий стол/html-project не будет работать, так как в пути есть кириллица. Чтобы такого не было стоит включить поддержку UTF в Windows. Делается это следующим образом.

В Windows 10:

1. Параметры
2. Время и язык
3. слева вкладка «Язык»
4. справа Административные языковые параметры
5. Вкладка «Дополнительно»
6. Изменить язык системы
7. Нажимаем на галочку: «Бета-версия. Использовать UTF-8.»
8. Нажимаем ОК, и перезагружаемся, после этого заново открываем Коалу и попробуем скомпилировать

Внимание! Данная настройка может повлечь проблемы в других программах.

Например при ее включении не запускается Open Server. Так что включать ее или нет, решать вам. Мой совет — не включать.

Просто следить чтобы все пути в проектах были на латинице.

Компиляция SCSS

Чтобы скомпилировать SCSS воспользуемся программой Koala. Скачать ее можно здесь. Она доступна для всех платформ, и умеет компилировать не только SASS/SCSS, но и Less c CofeeScript.

После создаем проект в котором создаем SCSS файл и пишем в нем SCSS код. Например вот такой:

Заметьте, я создал именно папку sass , чтобы Koala для готового .css файла создала отдельную css папку в корне проекта. Она умеет такое делать автоматически, но только когда исходная папка имеет имя sass , даже если внутри .scss файлы.

Содержимое файла main.scss

$mainColor: red; body

Определена переменная с именем $mainColor со значением red .
В body эта переменная использована, чтобы определить цвет текста.

Далее закидываем проект в Koala, видим что она нашла нужный файл и нотификацию о успехе компиляции.

Посмотрим на содержимое проекта, еще раз. Теперь в нем появилась папка CSS c скомпилированным main.css файлом.

Код main.css файла:

body < font-size: 18px; color: red; >/*# sourceMappingURL=main.css.map */

Поздравляю! Мы только что скомпилировали SCSS!)

Настройки программы Koala

Настройки у программы достаточно просты. Достаточно кликнуть на иконку шестеренки.

Основные настройки

Здесь вы можете выбрать язык программы, есть и Русский. Опции сворачивания программы в трей, чтобы не занимала место на таскбаре, нотификации при успешной компиляции, автоматическую компиляцию файлов когда проект добавлен в программу или обновлен. Можете поставить как у меня, но будьте аккуратны с треем, при сворачивании иконка программы будет улетать в него, и может показаться что программа не запущена, но она просто спряталась.

Теперь зайдем в настройки для SASS

Compass mode нужен чтобы использовать возможности библиотеки Compass, на начальном этапе они вам точно не понадобятся, поэтому отключаем.

Включаем Source Map (исходные карты), они нужны чтобы видеть в каком .scss файле изначально был описан каждый класс, который будет скомпилирован в CSS. Удобно для отладки стилей.

Еще можно включить Autoprefix и указать значение например как у меня, > 1% . Это значит что мы будем поддерживать 99% всех браузеров. Более подробно ознакомиться с ним можно на его официальной странице в GitHub, но указанной настройки вам также хватит для старта. Поэтому не рекомендую с ним заморачиваться на этом этапе.

Стиль вывода имеет 4 разных значения:

Если вы хотите выбрать максимально читабельный и развернутый CSS на выходе, то это expanded. Nested это немного сжатый с указанием вложенности стиль оформления CSS, compact — вытянутые стили в оду строку, каждый селектор с новой строки. Compressed- сжатый, минифицированный вид CSS, когда весь код файла вытянут в одну строчку, и удалены все лишние пробелы и символы которые могут быть удалены без потери работоспособности.

Я использую либо включенный стиль expanded c включенными «сорс-мапами» для удобства разработки, либо compressed c отключенным source maps когда надо сделать максимально сжатый CSS файл без лишнего веса.

Индивидуальные настройки для файлов

Еще в Koala можно открывать индивидуальные настройки для каждого файла, просто кликнув по нему. Выглядит это вот так:

По умолчанию эти индивидуальные настройки дублируют основные, поэтому не рекомендую их изменять. Единственное чем они могут быть полезны — это отключение галочки автокомпиляции для тех файлов которые вы не хотите компилировать. И еще в этой панели есть кнопка Compile, пригодится если вы хотите запустить сборку принудительно.

На этом с настройками закончили. Компиляция SCSS настроена.

Возможности SCSS

SCSS имеет массу возможностей, в некотором роде это почти язык программирования потому что в нем можно писать циклы и условия. Но реально для базовой пользы при верстке достаточно лишь несколько его функций. О них я расскажу в первую очередь.

Основные полезные возможности SCSS на каждый день:

• Подключение фрагментов, импорт других файлов
• Переменные
• Вложенные селекторы и медиа запросы

Подключение фрагментов, импорт файлов

В SCSS можно разделать стили проекта на отдельные части. Вот типичная структура проекта:

В папке sass созданы отдельные файлы для стилей проекта:
base/_vars.scss — глобальные переменные (сокращение от variables),
base/_base.scss — сбросы, нормализаторы и базовые стили проекта

В папке blocks отдельные файлы под секции или блоки и компоненты проекта: header, main, footer.

Имена данных файлов начинаются с символа подчеркивания, сделано это для того чтобы компилятор не компилировал их по умолчанию. Так он пойме что эти файлы являются фрагментами, не самостоятельными файлами, а частью другого файла. Это соглашение именования в документации SASS.

Импорт всех этих файлов выглядит следующим образом:

В импорте опущены символы подчеркивания в начале имени файла, и опущено расширения. SASS по умолчанию подставит _ и проверит файлы с расширением .scss . Поэтому их можно не указывать.

Импорты scss файлов в scss полностью переносят содержимое импортируемых. То есть на выходе мы получим один файл со всем кодом который импортировался в него.

Если внутри scss использовать импорт .css файлов, то содержимое css файлов не будет импортировано при компиляции, директива импорта так и останется импортом.

Пример импорта SCSS и CSS файла:

Результат в CSS:

В SCSS можно указывать комментарии двух стилей. Комментарии в CSS стиле /* Текст комментария */ — многострочные и будут перенесены в итоговый CSS код. Комментарии начинающиеся с // — однострочные, и не будут скомпилированы в CSS, они останутся только в .scss файле

/* Комментарий который попадет в CSS */ // Комментарий который останется только в SCSS

Переменные в SCSS

В SCSS можно использовать переменные. Объявляются они через имя начинающееся с символа $ , и после используются просто указав имя переменной, там где нужно получить её значение. Пример кода с переменной:

$mainColor: red; body

Если говорить о переменных в рамках проекта, то для них создается отдельный файл _vars.scss который подключается в начале импортов. Пример с ним был указан выше.

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

Пример. Этот SCSS код:

// Переменная $mainColor в глобальной области видимости имеет значение red $mainColor: red; body < // Переопределяем локально, // внутри селектора body переменую $mainColor на значение green $mainColor: green; color: $mainColor; >

Даст следующий результат:

body < color: green; /* В результате видим значение green */ >

Вложенные селекторы и медиа запросы

SCSS позволяет писать вложенные селекторы. Это можно проделывать с классами, псевдоэлементами, БЭМ элементами, медиазапросами. Давайте посмотрим на пример с вложенностью:

В CSS получим следующий результат:

Вложенность для псевдо элементов before и after :

.title < font-size: 22px; content: «—»; > content: «—»; >>

Результат в CSS:

.title < font-size: 22px; >.title::before < content: «—»; >.title::after

Указание родительского селектора при вложенности и символ подразумевается селектор внутри которого мы работаем. Его можно использовать не только для BEM naming подстановок, но и для цепочек от родительского селектора, например:

.card < font-size: 18px; .main font-size: 16px; >>
.card < font-size: 18px; >.main .card

Другие базовые возможности SCSS:

• Миксины
• Наследования
• Математические операции

Другие базовые возможности можно посмотреть в документации по SCSS.

Примечание. Возможные проблемы и их решения

Если вы сталкиваетесь с тем что Koala отказывается компилировать или следить за изменениями в файлах, проверьте чтобы в пути к вашему проекту не было кириллических символов. Путь к проекту начиная от диска должен быть полностью на латинице, вклбчая и имя пользователя если проект находится на рабочем столе.

Такой вариант не подойдет: C:UsersЮрийDesktopforest-travel
Такой путь будет работать: C:UsersyurijDesktopforest-travel

Если имя пользователя в Windows у вас на кириллице, тогда чтобы не переименовывать его, не создавать нового или не переустанавливать систему, просто размещайте все проекты на каком-либо диске, избегая рабочий стол, например: C:projectsforest-travel

Ссылки

• Официальная документация SASS
• Документация SASS на русском языке
• Программа Koala

Источник: webcademy.ru

Коала, хороший инструмент для разработчиков

На самом деле в Ubuntu и в Gnu / Linux есть несколько инструментов для разработчиков, но немногие из них существуют: в подавляющем большинстве хороший. У нас есть случай Netbeans, Sublime Text, Кронштейны, Затмение и многие другие, однако до сих пор использование препроцессоры это было довольно ограничено. Хотя верно то, что у нас есть много редакторов, которые могут создавать файлы для препроцессоров, не так много инструментов, которые позволяют нам видеть изменения в реальном времени, то есть иметь возможность прекомпилировать эти файлы, чтобы позже выгрузить их в файл css. Koala это один из тех немногих инструментов, которые позволяют нам использовать препроцессоры и видеть то, что мы создаем, в режиме реального времени.

• 1 Какие есть инструменты для предварительной обработки?
• 2 Что предлагает Коала?
• 3 Установка Коала

Какие есть инструменты для предварительной обработки?

Если вы знаете, как использовать препроцессоры, вы уже знаете несколько очень полезных инструментов для работы с препроцессорами. Лучше всего КодекитЖалко, что работает только на Mac OS. Codekit не только лучший, но и парадигма остальных инструментов. В настоящее время для Windows выпущен инструмент, способный затмить Кодекит, назван Препро, но этот инструмент выделяется только потому, что он идет туда, куда не идет Кодекит. Что касается мира Gnu / Linux и Ubuntu, наиболее похожим на них инструментом является Koala, довольно мощная программа, похожая на Кодекит и препро, с точки зрения интерфейса.

Что предлагает Коала?

Коала предлагает нам возможность использования препроцессоров, less, Sass, CofeeScript и Compass Framework. Коала присутствует на нескольких языках, включая испанский, и позволяет нам минимизировать наш код, как css, так и javascript. Проект Koala находится в Github, где, помимо поиска установочных файлов, мы находим отличное руководство по установке Koala, исправить существующие проблемы и настроить наши проекты. Проект Koala является открытым исходным кодом, поэтому нам не нужно платить за какую-либо лицензию, хотя было бы неплохо сделать пожертвование, так как проект выполняется самоотверженно, но Интернет, время или тесты они обычно не бесплатны.

Установка Коала

Чтобы иметь возможность установить Koala и что он работает в нашем Ubuntu, нам сначала нужно открыть терминал и написать следующее:

Это установит Ruby на наш компьютер, это не обязательно для работы Koala, а для работы Sass, поэтому его следует установить в первую очередь. Как только он будет установлен, мы официальный сайт и мы загружаем пакет, соответствующий нашей версии Ubuntu (32 или 64 бит). После того, как мы его установили, мы открываем его, и может случиться так, что он не откроется; похоже, что есть проблемы с некоторыми системами Gnu / Linux, в моем случае, например, у меня Ubuntu Gnome 13.10 и у меня не получилось с первого раза открыть, чтобы решить, открываем терминал и идем в

cd / lib / i386-linux-gnu, если у вас 32 бита

cd / lib / x86_64-linux-gnu, если у вас 64 бит

Однажды мы написали

Он может не сказать нам, что файл не существует, поэтому мы устанавливаем файл либудев0 а затем повторяем последнее действие. После этого у нас будет Koala отлично работают и готовы к использованию препроцессоры. Кто-нибудь предлагает другое?

Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Полный путь к статье: Убунлог » Общие » Linux » Коала, хороший инструмент для разработчиков

Источник: ubunlog.com

15 полезных инструментов Sass и Compass

Sass — это расширение CSS , которое добавляет в него вложенные правила, переменные, примеси, функции и многое другое. Его использование облегчает задачу создания CSS . После обработки кода Sass вы получаете надлежащим образом отформатированный CSS -код.

Compass — это CSS -фреймворк с открытым исходным кодом, что позволяет использовать CSS3 и популярные шаблоны проектирования. Compass работает исключительно с Sass , что способствует написанию более чистого и быстрого CSS -кода.

В этой статье приведена подборка полезных инструментов для работы с Sass и Compass , которые помогут вам быстро и просто создавать динамические веб-приложения.

1. Compass.app

Compass — это фреймворк, который позволяет намного проще создавать и поддерживать стили и разметку. Используя Compass вы будете генерировать стили в Sass , вместо обычного CSS . Compass.app — это приложение с интерфейсом в виде панелей меню, работающее только с Sass и Compass .

Его применение позволяет дизайнерам очень просто компилировать стили, не используя интерфейс командной строки. Приложение Compass.app написано на Java ( JRuby ) и работает на Mac , Linux и РС . Чтобы использовать его, вам не нужно устанавливать среду Ruby .

2. Scout

Scout — это кроссплатформенное приложение, которое запускает Sass и Compass через встроенную среду Ruby , что позволяет легко управлять всеми вашими Sass -проектами. Теперь вам не придется беспокоиться об установке Ruby или заниматься другими техническими вопросами.

3. Codekit

Codekit — это мощный компилятор, который автоматически обрабатывает при сохранении файлы Sass , Compass , Less , Stylus , Jade , Haml , Slim , CoffeeScript и Javascript .

Применение интерактивного обновления окна браузера, оптимизации изображений и быстрой отладки позволяет сделать работу с Compass и Sass чрезвычайно простой. Данное приложение также поддерживает возможность коллективной/командной работы над проектом и помогает уменьшить время загрузки ресурсов с помощью объединения и минимизации файлов.

4. Archetype

Archteype — это Compass/Sass фреймворк для создания настраиваемых, совместимых шаблонов и компонентов интерфейсов. Archteype поставляется с обширной документацией и использует оригинальный синтаксис языков программирования.

5. Susy

Susy предоставляет пользователям адаптивные сетки для Compass . Тем самым заполняя пробел, возникший после того, как из Compass сетки были удалены. Вы можете быстро добавлять для новых макетов контрольные точки медиа-запросов или задавать свои собственные параметры, используя массив сеток Susy . Данный инструмент позволяет за считанные минуты создать небольшой сайт или масштабируемую библиотеку сеток для использования в крупных проектах.

6. The Sassway

Sass Way предлагает обзор последних новостей и событий в сфере разработки CSS с помощью Sass и Compass . На ресурсе публикуются статьи, загружаемые ресурсы и учебные пособия, которые пригодятся как новичкам, так продвинутым пользователям.

7. Sassaparilla

Sassaparilla позволяет, используя Sass и Compass , значительно быстрее запускать адаптивные веб-проекты. Инструмент предназначен в основном для работы с макетами с вертикальной разбивкой элементов.

Он позволяет задавать размеры элементов в пикселях, а во время компиляции они переводятся в Em , что избавляет дизайнеров от необходимости производить сложные математические вычисления. Sassaparilla поддерживает переменные, используемые Sass , например, для определения цвета или других параметров.

8. LivingStyleGuide

LivingStyleGuide Gem — инструмент, предназначенный для упрощения создания руководств по стилям для Sass и Compass . Для того чтобы создать руководство по стилям, просто добавьте к Sass свои комментарии в одном из форматов Markdown .

9. Pondasee

Инструмент Pondasee был разработан, чтобы ускорить процесс создания веб-приложений. Он обладает всеми возможностями и функциями SCSS и Compass , и предназначен для упрощения создания шаблонов.

10. LiveReload

LiveReload встраивается в панель меню и отслеживает все изменения в файловой системе. Как только вы сохраняете файл, он обрабатывается в соответствии с заданными параметрами, и окно браузера обновляется. LiveReload работает с движками SASS , Compass , LESS , Stylus , CoffeeScript , IcedCoffeeScript , Eco , SLIM , HAML и Jade . Он настраивается всего с помощью двух чекбоксов, чтобы вам не пришлось ломать голову над большим количеством опций.

11. Koala

Koala — это GUI -приложение для компиляции CoffeeScript , Compass , Less и Sass , которое делает процесс разработки веб-дизайна более эффективным. Приложение работает на Mac , Linux , и Windows , и включает в себя такие функции, как компиляция в режиме реального времени, поддержка нескольких языков программирования и многое другое.

12. Bootstrap Sass

Bootstrap-Sass — это Sass -версия Bootstrap , которая идеально подходит для разработки Sass -приложений. Инструмент может устанавливаться с Rails , Compass или только с Sass .

13. Forge

Forge — бесплатный набор инструментов, запускаемых из командной строки. Он предназначен для загрузки и разработки в соответствующей среде тем WordPress с использованием таких языков программирования, как Sass , LESS и CoffeeScript .

Forge создает структурированную исходную папку с четкой и простой иерархией ( файлы основных шаблонов, SCSS-файлы и опции темы ). При внесении изменений в процессе разработки исходная папка автоматически компилируется в локально установленную систему WordPress .

14. Prepros

Prepros — это приложение, разработанное для упрощения компиляции кода. Оно компилирует коды Sass , Scss , Compass , Less , Jade , Haml и CoffeeScript в режиме реального времени, с автоматическим обновлением окна браузера,. Приложение не имеет зависимостей и имеет такие средства, как встроенный HTTP -сервер, отслеживание файлов в фоновом режиме, уведомления об ошибках и интерактивное включение CSS .

15. Break Point

Breakpoint позволяет легко создавать на Sass медиа-запросы с помощью упрощенного синтаксиса, основанного на наиболее часто используемых медиа-запросах. Создайте переменную, а затем вызовите ее с помощью примеси, а всю остальную работу выполнит Breakpoint — от написания самого медиа-запроса до решения вопросов, связанных с совместимостью с различными браузерами.

Редакция Перевод статьи « 15 Useful Sass and Compass Tools »

Источник: www.internet-technologies.ru