Sass это настоящая революция в верстке, это решение позволяющие писать гибкий CSS код и экономить при этом время. Если вы еще не сталкивались с препроцессорами CSS, тогда вам стоит в обязательном порядке обратить на них внимание.
Что такое Sass?
Sass дает нам другой подход при работе с CSS. Позволяет сохранять простоту и читабельность CSS кода. Автоматизировать рутину и строить логику.
Сcылка на официальную документацию: http://sass-lang.com/
Что такое Compass?
Compass делает работу с Sass ещё проще. Автор проекта Chris Eppstein, также добавил поддержку некоторых сконвертированных фреймворков, таких как Blueprint, YUI и 960.gs. Compass легко интегрировать в проекты основанные на Ruby, но его также легко добавить в любой другой проект. Compass является технологией с открытым исходным кодом и отлично документирован. Вы можете ознакомиться с исходниками и документацией.
Установка
Оба инструмента, Sass (является частью проекта Haml) и Compass устанавливаются, как Ruby gem-ы. Что это значит? Эти инструменты написаны на языке Ruby и для их установки вам необходимо иметь установленную среду исполнения этого языка. Это не отнимет много времени, есть прекрасный, развернутый материал по установке на официальном сайте.
Пользователи MacOS уже имеют предустановленную среду Ruby, но и они могут столкнуться с ошибкой доступа, при установке Compass и любых-других пакетов используя стандартный установщик Ruby — gem. Решений этой проблемы несколько, одним из актуальных на сегодня является установка пользовательской среды rbenv.
|
1 |
brew install rbenv |
Данный способ позволит вам установить нужную версию языка Ruby или сразу несколько версий для разных проектов и работать со средой исполнения не затрагивая внутреннюю структуру OS. На этот счет имеется несколько мнений, но в пользу этого способа говорит то, что работая с предустановленной средой вы все время будете испытывать неудобства с ограничением прав доступа. Команда sudo* не поможет.
/* Команда sudo может сработать при установке приложения, но проблем с правами в MacOS она не решает, в какой-то момент приложение может выдать необычную ошибку. Вы потратите много времени на поиск решения, а все дело как раз может заключаться с проблемой прав на использование системных директорий. Если вы никогда не сталкивались с подобным, то вы либо мало работали с консолью, либо настоящий гуру Nix систем и я искренне удивлен интересу к данному материалу с вашей стороны.
|
1 |
rbenv instal 2.3.3 |
После выполнения всех действий ошибка все равно может повторяться, здесь поможет ввод команд:
|
1 |
rbenv global 2.3.3 |
и
|
1 |
rbenv local 2.3.3 |
Далее (перед вводом команды закройте и вновь откройте окно терминала):
|
1 |
gem install compass |
Учтите, что версию следует вводить в соответствии с установленной вами через rbenv.
Настройка проекта
Если вы работаете с проектом основанным на Ruby ознакомьтесь с документаций, так как там скорее всего вы найдёте объяснение как интегрировать оба инструмента в фреймворк, с которым вы работаете.
Команда compass обладает множеством опций и если запустить compass —help, вам отобразится подсказка с перечнем данных опций:
Приступая к работе
Теперь мы начнём работу над Compass проектом. Для его создания через консоль установите нужную директорию и запустите следующую команду:
|
1 |
$ compass create |
В результате в консоль сообщит о созданных файлах и директориях:
Посетив директорию с проектом, мы можем убедиться, что файлы действительно созданы и с ними уже можно начинать работать.
После инициализации, Compass обычно создаёт папку по умолчания для Sass. Если вы внимательно посмотрите в каталоге проекта есть файл под названием config.rb и две другие директории.
Файл config.rb отвечает за конфигурацию от которой зависит Compass, но в большинстве случаев вам даже не придётся его трогать. Также, как упоминалось в сообщении, которое мы видели после создания проекта, на наш выбор есть три способа как будет обрабатываться наш Sass:
compass— используя данную опцию, вам нужно находиться в подходящем каталоге и Compass скомпилирует Sass единожды.compass -u путь/к/проекту— тоже самое, что и команда выше, но на этот раз вам не нужно находиться в директории проекта, вам следует передать путь к проекту в качестве параметра команде.compass --watch [путь/к/проекту]— данная команда довольно удобная, так как запустив её, Compass будет отслеживать изменения в Sass файлах и после того, как они появятся автоматически перекомпилирует соответствующий файл.
Теперь когда вы знаете, как настроить проект, мы переходим к правилам работы с Sass. В последующих статьях мы детально разберем синтакcис Saas, чтобы затем вновь вернуться к работе с Compass и на примере стандартного функционала рассказать чем же он так хорош.
