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

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

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

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

1. Compass.app

Compass.app

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

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

2. Scout

Scout

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

3. Codekit

Codekit

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

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

4. Archetype

Archetype

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

5. Susy

Susy

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

6. The Sassway

The Sassway

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

7. Sassaparilla

Sassaparilla

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

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

8. LivingStyleGuide

LivingStyleGuide

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

9. Pondasee

Pondasee

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

10. LiveReload

LiveReload

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

11. Koala

Koala

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

12. Bootstrap Sass

Bootstrap Sass

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

13. Forge

Forge

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

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

14. Prepros

Prepros

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

15. Break Point

Break Point

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

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