Вкратце, Compass – это расширение Sass и, как LESS-элемент в LESS, он оснащен множеством готовых к использованию CSS3-миксинов. Кроме того, он предоставляет некоторые другие элементы, которые делают его довольно мощным добавлением к Sass. Давайте с ним познакомимся.
Установка Compass
Compass, как и Sass, должен быть установлен на ваш компьютер. Но, если вы используете приложения вроде Scout App или Compass.app, то это вовсе не обязательно.
Без них вам нужно будет сделать это автоматически посредством командной строки или терминала. Для того чтобы сделать это, впишите следующую команду:
На Mac/Linux терминале
sudo gem install compass
В командной строке Windows
gem install compass
После успешной установки вы получите следующее оповещение:
Затем, запустите следующую команду в вашей рабочей директории, чтобы добавить файлы проекта Compass.
compass init
Настройка Compass
Если вы запустите команду compass init, то у вас должен появиться файл под названием config.rb. этот файл используется для конфигурации выходного результата проекта. Например, мы можем изменить названия предпочитаемых каталогов.
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
Исключаем строку комментария, сгенерированную Compass. Мы выставляем true, если нам нужно выводить комментарии, либо false, если это не требуется.
line_comments = false
Мы также можем определить результат вывода CSS. Есть 4 опции, из которых мы можем выбирать: :expanded, :compact, :compressed и :nested. Сейчас нам нужна опция :expanded, так как мы на этапе разработки.
output_style = :expanded
Нам кажется, что этих конфигураций будет достаточно для большинства проектов, но вы всегда можете обратиться за помощью к документации, если вам нужны будут дополнительные опции.
Наконец нам нужно просмотреть каждый файл в каталоге посредством данной командной строки:
compass watch
Это командная строка, как и в Sass, будет следить за всеми изменениями в файлах, и создавать или обновлять соответствующие CSS-файлы. Но помните, что эту строку нужно запускать после того, как вы настроили проект в config.rb, в противном случае она просто проигнорирует изменения в файле.
CSS3-миксины
Перед тем, как мы перейдем к CSS3, в нашем основном .scss-файле нам нужно импортировать Compass посредством следующей строки «@import "compass";». Это импортируем все расширения в Compass. Но, если нам нужны только CSS3, мы также можем повторить это все более подробно при помощи строки @import "compass/css3".
Теперь давайте начнем разработку проекта при помощи Sass и Compass. В HTML-документе, предположив что вы уже создали его, нам нужно поместить следующую разметку:
<section>
<div> </div>
</section>
Суть довольно проста. Мы создаем повернутый блок с закругленными углами, и ниже предлагаем вам наши вложенные стили Sass для начала;
body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
}
}
И для того, чтобы у нашего прямоугольника были закругленные углы, мы можем включить CSS3-миксин Compass следующим образом:
body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
@include border-radius;
}
}
Этот миксин border-radius сгенерирует все необходимые браузерные префиксы и, по умолчанию радиус углов будет составлять 5 пикселей. Но мы также можем указать необходимый нам радиус следующим образом:
@include border-radius(10px);
section div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Далее, следуя плану, нам нужно немного повернуть блок. Это довольно просто сделать при помощи Compass. Все, что нам нужно сделать, это просто запустить метод transformation следующим образом:
body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
@include border-radius(10px);
@include rotate;
}
}
Этот миксин также будет генерировать браузерные префиксы, и по умолчанию вращение будет составлять 45 градусов. Ознакомьтесь с только что сгенерированным CSS-кодом ниже:
section div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Compass Helpers (вспомогательные функции)
Одним из самых мощных свойств Compass является Helpers. Судя по официальному сайту, Compass Helpers представляют собой функции, которые позволяют встроить функции, представленные в Sass. Итак, давайте посмотрим на следующие примеры, чтобы все стало более понятным.
Добавляем файлы @font-face
В данном примере мы собираемся добавить собственные шрифты при помощи правила @font-face. В чистом CSS3, код может выглядеть примерно так, как показано ниже, и содержать 4 разных типа шрифтов.
@font-face {
font-family: "MyFont";
src: url('/fonts/font.ttf') format('truetype'),
url('/fonts/font.otf') format('opentype'),
url('/fonts/font.woff') format('woff'),
url('/fonts/font.eot') format('embedded-opentype');
}
С помощью Compass мы можем сделать то же самое гораздо проще при помощи вспомогательной функции font-files();
@include font-face("MyFont", font-files("font.ttf", "font.otf", "font.woff", "font.eot"));
Вышеприведенный код будет генерировать результат, абсолютно идентичный с тем, который можно получить при помощи CSS3-кода, который был приведен чуть ранее. Он также автоматически определит тип шрифта и добавит его в синтаксис format().
Тем не менее, если мы взглянем на код чуть внимательнее, то заметим, что здесь мы не добавляли путь до шрифта (/fonts/). Так как же compass знает, где расположены эти шрифты? Что же, не путайтесь, этот путь представляет собой производное из файла config.rb, где путь указан в параметре fonts_path.
fonts_dir = "fonts"
Давайте предположим, что мы изменили параметр на fonts_dir = "myfonts", тогда сгенерированный код будет следующим: url('/myfonts/font.ttf'). По умолчанию, когда мы не указываем путь, Compass направляет его на stylesheets/fonts.
Добавляем изображения
Давайте создадим еще один пример, на этот раз мы будем добавлять изображение. Добавление изображений посредством CSS – это довольно распространенная практика. Мы реализуем это при помощи параметра background-image следующим образом:
div {
background-image: url('/img/the-image.png');
}
В Compass, вместо того, чтобы использовать функцию url(), мы можем заменить ее вспомогательной функцией image-url(), а также как и в случае с вышеприведенным примером @font-face, мы можем полностью игнорировать путь, а compass сделает все за нас.
Этот код также генерирует те же CSS-выражения, как и в первом отрывке кода.
div {
background-image: image-url(the-image.png);
}
Вдобавок, Compass также оснащен вспомогательной функций габаритов изображения, которая напрямую определяет ширину и высоту изображения, так что, если нам нужно будет указать оба параметра в нашем CSS-коде, мы можем добавить дополнительные две строки кода следующим образом:
div {
background-image: image-url("images.png");
width: image-width("images.png");
height: image-height("images.png");
}
В результаты мы получим вроде этого:
div {
background-image: url('/img/images.png?1344774650');
width: 80px;
height: 80px;
}
В завершение
Итак, сегодня мы довольно много рассказали вам о Compass и, как вы можете видеть, это действительно серьезный инструмент, который позволяет нам писать CSS гораздо проще.
И как вы уже знаете, Sass – это не единственный CSS-препроцессор. Есть также LESS, который мы уже с вами обсуждали. В одном из следующих руководств мы постараемся сравнить эти два препроцессора CSS-кода.
* Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.