@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 это всего лишь инструмент, но его умное использование дает впечатляющие результаты и избавляют от множества рутинной работы.
ссылка на оригинал статьи http://habrahabr.ru/post/194242/
Добавить комментарий