Compass — инструмент для эффективной работы с CSS

С выходом CSS3 появилось множество новшеств: с новыми свойствами стили стали сложнее, но не появилось никаких улучшений для поддержки новых и старых сложностей, в том числе дупликации кода. В чистом CSS отсутствует модульность, так как разбиение стилей на файлы и их подключение через @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 это всего лишь инструмент, но его умное использование дает впечатляющие результаты и избавляют от множества рутинной работы.

Автор: semashko_sergey

Источник