Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

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

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

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".

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

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

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

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

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

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

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

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

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

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

  • compass - используя данную опцию, вам нужно находиться в подходящем каталоге и Compass скомпилирует Sass единожды.
  • compass -u путь/к/проекту - тоже самое, что и команда выше, но на этот раз вам не нужно находиться в директории проекта, вам следует передать путь к проекту в качестве параметра команде.
  • compass --watch [путь/к/проекту] - данная команда довольно удобная, так как запустив её, Compass будет отслеживать изменения в Sass файлах и после того, как они появятся автоматически перекомпилирует соответствующий файл.
  • Теперь когда вы знаете, как настроить проект, я объясню некоторые правила работы с Sass

    Синтаксис Sass

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

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

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

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

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

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

    И вуаля!

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

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

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

    Переменные

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

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

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

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

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

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

    #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 (не повторяйтесь)". Миксины позволят вам как раз это. К примеру, набирают популярность закруглённые уголки у блоков, возможно вы захотите создать миксин, которые будет отвечать за это, тем самым где-нибудь, (не под селектором) добавьте:

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

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

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

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

    Импорт

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

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

    Заключение

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

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

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

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


    Advertisement
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.