Блог

Наши новости, публикации и мысли.

Установка Sass и Compass на Windows 7

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

Compass — CSS-фреймворк, использующий языки SASS и SCSS. По сути это набор миксинов и инструментов для упрощения написания таблиц стилей, на выходе мы получим скомпилированный привычный CSS.

Для чего нужны и чем так удобны SCSS и Compass?

Во-первых, стоит упомянуть о переменных, чего так не хватало в CSS. Например, определим цвет текста и ссылок, после чего мы сможем их использовать в любом месте наших стилей:

Неоспоримый плюс, учитывая возможный немаленький размер наших стилей.

Во-вторых, большое количество примесей (mixins). Вспомните, как часто приходится писать одни и те же свойства для разных браузеров, например — border-radius выглядит обычно так:

В SCSS:

Для того, чтобы не писать правила для каждого из браузеров, разработчики включили множество инструментов для быстрого написания CSS3-примочек. Градиенты, скругленные углы, тени и многое другое теперь можно создавать одной строчкой.

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

Значительно ускорит работу автоматическая генерация спрайтов изображений, генерация изображения в base64 и многое другое.

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

Как установить и настроить Compass на Windows?

Ну, а настроить связку sass+compass на ОС Windows довольно просто.

Во-первых, установите Ruby с помощью уже готового установщика с rubyinstaller.org.

На момент написания статьи последней версией была 1.9.3. Можете оставить директорию по умолчанию, и рекомендую установить следующую опцию, отмеченную на скриншоте, которая поможет в будущем избавиться от лишних проблем и телодвижений:

Далее, откройте в командную строку Windows (Win+R → cmd) и перейдите в Ruby bin директорию, например, C:\Ruby193\bin для данной версии.
Выполните команду.

Если на экране отобразилась информация о версии Ruby, поздравляю, установка прошла успешно.
Теперь последовательно установите SASS и Compass с помощью gem’ов. Выполните следующие команды в командной строке, оставаясь в той же директории:

По завершению установки, можете выполнить команду

Таким образом, Вы узнаете, что Compass запущен и готов к работе. Теперь необходимо настроить наблюдение за вашими scss файлами проекта и компиляцию css.

Последние записи

  • При использовании замечательной библиотеки AngularUI для AngularJS может возникнуть проблема со стандартной директивой Typeahead из набора для Bootstrap. Дизайнер UI/UX может потребовать отображать список по фокусу в...
    24 марта 2014
  • После завершения создания сайта встает вопрос об оптимизации загрузки кода. Минификация javascript файлов позволяет уменьшить их размер путем удаления лишних символов, при этом обычно используют обфускацию, т.е....
    04 февраля 2014
  • Создать сайт для предприятия малого бизнеса не сложно. Трудности начнутся, когда вы захотите привлечь на свой новый сайт трафик. Да и качество самого трафика нужно разделять, ведь...
    03 ноября 2013
  • Дано: Таблица объектов и таблица городов, имеющие связь MANY_MANY; Yii Framework v.1.1.14; Задача: организовать редактирование связей и поиск объектов по массиву id городов, используя стандартные средства фреймворка.
    30 сентября 2013