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 - от написания самого медиа-запроса до решения вопросов, связанных с совместимостью с различными браузерами.