С выходом CSS3 появилось множество новшеств: с новыми свойствами стили стали сложнее, но не появилось никаких улучшений для поддержки новых и старых сложностей, в том числе дупликации кода. В чистом CSS отсутствует модульность, так как разбиение стилей на файлы и их подключение через
Решение этих проблем нашлось в CSS препроцессорах, с их помощью стало возможным использование переменных, выполнение математических подсчетов в коде, появилась возможность повторно использовать код с помощью миксинов и наследования. Идеология препроцессоров базируется на логическом разделении файлов стилей по контексту — решена проблема модульности. Безусловно, плюсом является уменьшение риска конфликтов кода в команде, навигация по коду становится намного удобнее. Так же в препроцессорах появилась возможность генерации кода с помощью циклов, в SASS это выглядит так:
или:
Compass нечто большее чем CSS препроцессор, разработчики Compass позиционируют его как дизайнерский фреймворк. Compass использует SASS синтаксис (.sass или .scss), так что любой SASS код будет скомпилирован и в Compass.
Одной из главных концепций Compass является модульность и упрощение поддержки стилей, что позволяет сконцентрироваться на стилизации, тратить минимальные усилия на поддержку старых браузеров, поэтому Compass имеет широкий функционал и работает с большинством CSS framework-ов:
— огромное количество встроенных mixins для работы с изображениями, CSS3, шрифтами, лэйаутами;
— утилиты для работы с цветом, спрайтами и стилизации базовых элементов таких как списки, таблицы, линки;
— встроенный CSS reset;
— normalize.css;
— HTML5 Boilerplate, Blueprint, Twitter Bootstrap;
— Grid systems(Fluid 960, Singularity, 960.gs, Susy, Zen grids, и др.)
— Widgets (Fancy Buttons, Sassy Buttons);
— CSS3 PIE;
Cписок Compass mixins по категориям здесь, более полный список Compass модулей здесь.
Compass написан на Ruby и устанавливатся из gem пакет-менеджера (требуется установленный Ruby):
Scout, Compass.app — для тех кто не любит возиться с комадной строкой.
Установить расширение Compass также довольно просто:
1. Устанавливаем расширение:
2. Добавить в начало файла config.rb в Compass проекте:
3. Подключить расширение:
Давайте рассмотрим преимущества использования Compass в деле.
На этапе разработки довольно часто приходится обновлять спрайты, и в большинстве случаев это рутинное действие производится вручную. Compass предлагает иной подход для генерации спрайтов — маппинг изображений к переменной-спрайту (http://compass-style.org/reference/compass/helpers/sprites/):
или можно объявить спрайт с нестандартными настройками:
Переменную спрайта $icons теперь можно использовать в свойстве background используя миксин sprite:
При добавления нового изображения в папку <arrows-dirname> Compass перегенерирует спрайт, не надо беспокоиться о background-position — Compass подставляет нужные значения для отображения соответсвующих изображений.
Compass является удобным инструментом для работы со шрифтами.
В CSS добавление нестандартного шрифта выглядит следующим образом:
Пример с использованием встроенного в Compass миксина font-face:
Работа с em-ами в качестве размера шрифтов не всегда самая приятная в CSS из-за дополнительных математических расчетов, но Compass упрощает работу с ними:
При работе с em лучше избегать наследования шрифтов, но пример выше показывает, как можно справиться с подобными ситуациями в Compass.
Compass также работает с Vertical Rhythms(подробнее про Vertical Rhythms).
Встроенные миксины Compass поддерживают генерацию вендорских префиксов. Пример:
Возможно конфигурирование префиксов:
Для работы с градиентами в Compass есть 2 встроенных миксина linear-gradient и radial-gradient, которые изпользуются в связке с мисксинами background-image или background:
Еще один пример использования градиентов.
Для работы с медиа запросами в Compass есть очень полезный модуль Breakpoint. Breakpoint позволяет собрать медиа запросы в одном блоке стилей, что является структурированным и повышает читабельность кода:
Примеры более сложных запросов с «И», «ИЛИ» логикой:
Compass является мощным инструментом для разработчика, помогает быстро писать эффективный и кросбраузерный CSS код. Также следует отметить, что Compass является полезным инструментом для быстрого прототипирования в браузере и работает в связке с LiveReload.
Не стоит забывать, что Compass это всего лишь инструмент, но его умное использование дает впечатляющие результаты и избавляют от множества рутинной работы.
@import пагубно влияет на производительность. Решение этих проблем нашлось в CSS препроцессорах, с их помощью стало возможным использование переменных, выполнение математических подсчетов в коде, появилась возможность повторно использовать код с помощью миксинов и наследования. Идеология препроцессоров базируется на логическом разделении файлов стилей по контексту — решена проблема модульности. Безусловно, плюсом является уменьшение риска конфликтов кода в команде, навигация по коду становится намного удобнее. Так же в препроцессорах появилась возможность генерации кода с помощью циклов, в SASS это выглядит так:
/* SCSS */
$animals: puma, sea-slug, salamander;
@each $animal in $animals {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/* скомпилированный CSS */
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
или:
/* SCSS */
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}/* скомпилированный CSS */
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
Немного о Compass
Compass нечто большее чем CSS препроцессор, разработчики Compass позиционируют его как дизайнерский фреймворк. Compass использует SASS синтаксис (.sass или .scss), так что любой SASS код будет скомпилирован и в Compass.
Одной из главных концепций Compass является модульность и упрощение поддержки стилей, что позволяет сконцентрироваться на стилизации, тратить минимальные усилия на поддержку старых браузеров, поэтому Compass имеет широкий функционал и работает с большинством CSS framework-ов:
— огромное количество встроенных mixins для работы с изображениями, CSS3, шрифтами, лэйаутами;
— утилиты для работы с цветом, спрайтами и стилизации базовых элементов таких как списки, таблицы, линки;
— встроенный CSS reset;
— normalize.css;
— HTML5 Boilerplate, Blueprint, Twitter Bootstrap;
— Grid systems(Fluid 960, Singularity, 960.gs, Susy, Zen grids, и др.)
— Widgets (Fancy Buttons, Sassy Buttons);
— CSS3 PIE;
Cписок Compass mixins по категориям здесь, более полный список Compass модулей здесь.
Как начать с Compass
Compass написан на Ruby и устанавливатся из gem пакет-менеджера (требуется установленный Ruby):
$ gem update --system
$ gem install compass
$ compass create <myproject> /* создаем compass проект */
$ compass watch [path/to/compass-project] /* запускаем Compass просматривать на изменения папку [path/to/compass-project]*/
Scout, Compass.app — для тех кто не любит возиться с комадной строкой.
Установить расширение Compass также довольно просто:
1. Устанавливаем расширение:
$ gem install {extension}
2. Добавить в начало файла config.rb в Compass проекте:
require '{extension}'
3. Подключить расширение:
@import '{extension}';
Давайте рассмотрим преимущества использования Compass в деле.
Автоматически генерируемые спрайты
На этапе разработки довольно часто приходится обновлять спрайты, и в большинстве случаев это рутинное действие производится вручную. Compass предлагает иной подход для генерации спрайтов — маппинг изображений к переменной-спрайту (http://compass-style.org/reference/compass/helpers/sprites/):
/* SCSS */
$arrows: sprite-map("arrows/*.png"); // содержит все изображения в папке arrows
или можно объявить спрайт с нестандартными настройками:
/* SCSS */
/* Возможно несколько способов расположения элементов в спрайте: vertical(по умолчанию), horizontal, diagonal, smart */
$<arrows-dirname>-layout: smart;
$arrows: sprite-map("<arrows-dirname>/*.png",
$position: 100%,
$spacing: 25px, /* отступы между изображениями */
$arrows-arrow-down-spacing: 10px /* отступ в спрайте для <arrows-dirname>/arrow-down.png */
);
Переменную спрайта $icons теперь можно использовать в свойстве background используя миксин sprite:
/* SCSS */
background: sprite($arrows, arrow-down) no-repeat;
/* скомпилированный CSS */
background: url('/<arrows-dirname>/arrow-down.png?12345678') 0 -24px no-repeat;
При добавления нового изображения в папку <arrows-dirname> Compass перегенерирует спрайт, не надо беспокоиться о background-position — Compass подставляет нужные значения для отображения соответсвующих изображений.
Удобно работать со шрифтами и размерами
Compass является удобным инструментом для работы со шрифтами.
В CSS добавление нестандартного шрифта выглядит следующим образом:
/* CSS */
@font-face {
font-family: "PacificoRegular";
src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot');
src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot'),
url('[project-root]/fonts/pacifico/Pacifico-webfont.woff') format('woff'),
url('[project-root]/fonts/pacifico/Pacifico-webfont.ttf') format('truetype'),
url('[project-root]/fonts/pacifico/Pacifico-webfont.svg') format('svg');
}
Пример с использованием встроенного в Compass миксина font-face:
/* SCSS */
@include font-face("PacificoRegular", font-files(
"pacifico/Pacifico-webfont.woff",
"pacifico/Pacifico-webfont.ttf",
"pacifico/Pacifico-webfont.svg"
),
"pacifico/Pacifico-webfont.eot" /* относительный путь к .eot файлу для IE */
);
Работа с em-ами в качестве размера шрифтов не всегда самая приятная в CSS из-за дополнительных математических расчетов, но Compass упрощает работу с ними:
/* SCSS */
$base-font-size: 14px; /* задаем базовый размер */
div{
@include adjust-font-size-to(28px); /* @adjust-font-size-to() - подсчитывает размер шрифта относительно базового */
h1 {
@include adjust-font-size-to(32px, $from-size: 28px); /* параметр $from-size используется при наследовании размеров для корректного подсчета em */
}
}
/* скомпилированный CSS */
body {
font-size: 0.875em; // 0.875 * 16px = 14px
}
div {
font-size: 2em; // 2 * 14px = 28px
}
div h1 {
font-size: 1.143em;// 1.143 * 28px = 32px
}
При работе с em лучше избегать наследования шрифтов, но пример выше показывает, как можно справиться с подобными ситуациями в Compass.
Compass также работает с Vertical Rhythms(подробнее про Vertical Rhythms).
Вендорские префиксы
Встроенные миксины Compass поддерживают генерацию вендорских префиксов. Пример:
/* SCSS */
.round {
@include border-radius(4px);
}
/* скомпилированный CSS */
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
Возможно конфигурирование префиксов:
/* SCSS */
$experimental-support-for-mozilla : true; // !default;
$experimental-support-for-webkit : true; // !default;
$support-for-original-webkit-gradients : true; // !default;
$experimental-support-for-microsoft : true; // !default;
$experimental-support-for-opera : false;
$experimental-support-for-khtml : false;
.round {
@include border-radius(4px);
}
/* скомпилированный CSS */
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
Градиенты
Для работы с градиентами в Compass есть 2 встроенных миксина linear-gradient и radial-gradient, которые изпользуются в связке с мисксинами background-image или background:
/* SCSS */
@import "compass/css3/images";
@import "compass/utilities/general/hacks"; /* необходимо для @filter-gradient */
.item {
/* для IE, лучше помещать этот блок перед @linear-gradient или в отдельный файл для IE стилей */
@include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback: */
background: #cccccc;
/* CSS3 c префиксами вендоров */
@include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
/* скомпилированный CSS */
.item {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
/* генерация вендорских префиксов */
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
Еще один пример использования градиентов.
Media queries
Для работы с медиа запросами в Compass есть очень полезный модуль Breakpoint. Breakpoint позволяет собрать медиа запросы в одном блоке стилей, что является структурированным и повышает читабельность кода:
/* SCSS */
$small: 543px;
$medium: 794px;
$fence-sm: $small $medium;
#foo {
content: 'No Media Queries';
@include breakpoint($small) {
content: 'Small Media Query';
}
@include breakpoint($fence-sm) {
content: 'Fenced Media Query';
}
}
/* скомпилированный CSS */
#foo {
content: 'No Media Queries';
}
@media (min-width: 543px) {
#foo {
content: 'Small Media Query';
}
}
@media (min-width: 543px) and (max-width: 794px) {
#foo {
content: 'Fenced Media Query';
}
}
Примеры более сложных запросов с «И», «ИЛИ» логикой:
/* SCSS */
$print-land: print monochrome (orientation landscape);
$fenced-landscape: screen 321px 543px, handheld (orientation portrait); /* сгенерируется в screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) */
#foo {
@include breakpoint($print-land) {
content: 'Monochrome Print in Landscape';
}
@include breakpoint($fence-landscape) {
content: 'Screen media type between 300px and 500px or Handheld media type in Portrait';
}
}
/* скомпилированный CSS */
@media print and (monochrome) and (orientation: landscape) {
#foo {
content: 'Monochrome Print in Landscape';
}
}
@media screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) {
#foo {
content: 'Screen media type between 321px and 543px or Handheld media type in Portrait';
}
}
Итоги
Compass является мощным инструментом для разработчика, помогает быстро писать эффективный и кросбраузерный CSS код. Также следует отметить, что Compass является полезным инструментом для быстрого прототипирования в браузере и работает в связке с LiveReload.
Не стоит забывать, что Compass это всего лишь инструмент, но его умное использование дает впечатляющие результаты и избавляют от множества рутинной работы.
