Используйте Compass и Sass для CSS в следующем проекте

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

Что такое Sass?

Проще говоря Sass другой подход при работе с CSS. Позволяет вам сохранять простоту и читабельность CSS кода. Код ниже:

После компиляции выглядит следующим образом:

Вы можете ознакомиться с Sass документацией на http://sass-lang.com/

Что такое Compass?

Compass делает работу с Sass ещё проще. Автор проекта Chris Eppstein, также добавил поддержку некоторых сконвертированных фреймворков, таких как Blueprint, YUI и 960.gs. Compass легко интегрировать в проекты основанные на Ruby, но его также легко добавить в любой другой проект. Compass является технологией с открытым исходным кодом и отлично документирован. Вы можете ознакомиться с исходниками и документацией.

Установка

Оба инструмента, Sass (является частью проекта Haml) и Compass устанавливаются, как Ruby гемы. Если вы не понимаете о чём идёт речь, обратите внимание на мой предыдущий туториал Ruby on Rails для дизайнеров "Step 1 - установка Ruby on Rails", и продолжайте скролить вниз пока не найдёте часть под названием "Установка Rails".

Для установки обоих гемов нам достаточно запустить одну команду:

1

(sudo) gem install haml chriseppstein-compass

После того как вы увидите сообщение, что оба гема успешно установлены, можете  дальше следовать инструкциям в данном туториале.

Настройка проекта

Если вы работаете с проектом основанным на Ruby ознакомьтесь с документаций, так как там скорее всего вы найдёте объяснение как интегрировать оба инструмента в фреймворк, с которым вы работаете, но я подозреваю, что мы имеем дело с обычнм HTML или подобным проектом.

Команда compass обладает множеством опций и если запустить compass --help, вам отобразится подсказка с перечнем данных опций:

К слову: вторая строка сверху гласит "Loading haml-edge gem." это потому что я использую последнюю версию, вам не стоит беспокоится если ваш вывод отличается от моего.

Теперь мы начнём работу над Compass проектом. Для его создания запустите следующую команду (включая точку в конце, которая сообщает compass где мы хотим разместить проект!)

1

compass  --sass-dir=sass .

Вы должны увидеть:

После инициализации, Compass обычно создаёт папку по умолчания для Sass под названием src, но мне хотелось изменить это, поэтому я добавил опцию. Если вы внимательно посмотрите в каталоге проекта есть файл под названием config.rb и две другие директории.

Файл config.rb отвечает за конфигурацию от которой зависит Compass, но в большинстве случаев вам даже не придётся его трогать. Также, как упоминалось в сообщении, которое мы видели после создания проекта, на наш выбор есть три способа как будет обрабатываться наш Sass:

Теперь когда вы знаете, как настроить проект, я объясню некоторые правила работы с Sass

Синтаксис Sass

Обычно, работая с CSS, вы пишите что-то вроде:

1

#header {width: 900px; background:#111;}

2

#header a {color:#000; text-decoration:none;}

Проблема в том, что в данном случае вы повторяете одно и тоже имя много раз. Давайте сделаем тоже самое с Sass. Я буду работать с screen.sass файлом, так что удалите всё и ваш Sass будет выглядеть как:

1

#header

2

  :width 900px

3

  :background #111

4

  a

5

    :color #000

6

    :text-decoration none

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

Первый селектор не имеет отступа. Также все свойства (цвет, высота, ширина и так далее) начинаются с двоеточия (данный синтаксис устарел, двоеточие следует ставить после названия свойства, речь идёт о Sass Indented Syntax, примечание переводчика). Соответственно свойства #header обладают отступом. Не важно используются-ли табы или пробелы, но использовать стоит что-то одно, иначе вы увидите ошибку (которую я скоро вам покажу).

После свойств идёт следующий селектор. Так как он также обладает отступом, как и свойства, конечный CSS будет выглядеть, как #header a ...

Теперь когда мы немного разобрались, давайте попробуем скомпилировать Sass: (в директории нашего проекта)

1

compass

И вуаля!

Давайте предположим, что для отступов вы использовали, как табы, так и пробелы, Compass выдаст ошибку:

Зная CSS, процесс обучения Sass не вызовет у вас сложностей, так как главная разница - это правила форматирования. Далее, мы будем работать с более продвинутыми (но в тоже время более крутыми!) частями Sass.

Полезные особенности Sass

Переменные

Одна из потрясающих особенностей Sass - возможность использовать переменные, к примеру:

1

!link_color = #fff

2

#header

3

  :width 900px

4

  :background #111

5

  a

6

    :color = !link_color

7

    :text-decoration none

После компиляции мы получим:

Математические выражения

Возможно заголовок покажется вам забавным, но это правда вы можете выполнять математические выражения в Sass! Для демонстрации мы будем использовать интерактивный режим Sass, запустите:

1

sass -i

Немного поигравшись, можно получить следующие результаты:

Или более визуализированный подход:

#111 - #999 = #000

#111 + #999 = #aaa

#398191 + #111 = #4a92a2

#398191 - #111 = #287080

Помимо сложения и вычитания, вы также можете умножать и делить:

#398191 / 2 = #1c4048

#398191 * 2 = #72ffff

Для выхода из интерактивного режима, нажмите Control-C, после чего напечатайте "end", затем нажмите enter.

Миксины

Если вы никогда не слышали о принципе DRY, DRY означает "don't repeat yourself (не повторяйтесь)". Миксины позволят вам как раз это. К примеру, набирают популярность закруглённые уголки у блоков, возможно вы захотите создать миксин, которые будет отвечать за это, тем самым где-нибудь, (не под селектором) добавьте:

1

=rounded

2

  :border-radius 4px

3

  :-moz-border-radius 4px

4

  :-webkit-border-radius 4px

Чтобы использовать миксин:

1

#header

2

  :width 900px

3

  :background #111

4

  +rounded

Результат после компиляции:

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

1

=rounded(!radius = 4px)

2

  :border-radius = !radius

3

  :-moz-border-radius = !radius

4

  :-webkit-border-radius = !radius

Далее мы можем использовать миксин таким же образом, по умолчанию значение будет равно 4px, если вы хотите другое значение, тогда:

1

#header

2

  :width 900px

3

  :background #111

4

  +rounded(8px)

Импорт

Sass также обладает возможностью импортировать другие Sass файлы, к примеру вы хотите импортировать файл (такой же как и Sass файл с которым мы уже работаем), в таком случае, вам следует:

1

@import reset.sass

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

Заключение

Надеюсь вы поняли основы использования Sass и Compass и захотите использовать его в следующем проекте! Теперь вы пожалуй чувствуете себя также, как и я, когда я открыл для себя Sass - "Мне это не нужно!", всё же вам следует попробовать. Я начал использовать данную технологию во всех моих проектах и мне действительно нравится это.

Полезные ссылки

Вот несколько ссылок, которые вероятно могут вам помочь:

• Документация Sass содержит то о чём я говорил сегодня, а также много чего ещё. Стоит изучить данный материал, если вы всерьёз заинтересовались Sass.
• Sass плагин для TextMate, я часто им пользуюсь.
• Официальный скринкаст о Compass, освещает практически все концепции касательно Compass и Sass.

• Подпишитесь на наш Twitter, или на RSS рассылку Nettuts+, если хотите ещё больше ежедневных статей на тему веб-разработки.