Нещодавно я пояснював, що таке Sass, і як він допомагає верстальнику економити робочий час. Тепер доповню опис мануалом для тих, хто турбується про те, щоб їх верстка була кросбраузерною (тобто, всіх хороших верстальників).

Навіщо потрібні Sass-сніпети? Простіше пояснити на прикладі. Візьмемо прозорість. Починаючи з IE10 і сучасних версій Firefox, Opera, Chrome, прозорість об’єкта можна вказати простою властивістю:

.transp {
opacity: 0.5;
}

Але в застарілих версіях браузерів це працювати не буде. У такому випадку потрібно вказувати «хаки» для всіх пацієнтів. Якщо потрібно додати кілька видів прозорості, для кожного з класів замість одного рядка доведеться додавати п’ять. Аналогічна ситуація з фонами CSS3, тінню об’єктів і тексту, поворотів (rotation), кордонів (border) і так далі.

Як це працює?

Тут нам на допомогу прийде Sass: з його допомогою ми можемо створити свої функції, які будуть видавати кросбраузерності стилі в залежності від отриманих параметрів. Наприклад, ми вирішимо використовувати функцію прозорості transp ($s) c параметром $s = 50.

Потрібно один раз оголосити функцію і далі використовувати її будь-яку кількість разів. Приклади функцій ви побачите нижче, а їх використання в Sass буде таким:

.transp {
@include transp(50);
}

А в готовому CSS отримаємо абсолютне й достатня рішення для 100% браузерів:

.transp {
opacity: 0.5; 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}

Як бачите, такими сниппетами можна зменшити кількість коду десь на чверть. У разі великих проектів це інструмент, без якого океанський круїзний лайнер буде йти на весловому ходу. Тепер від теорії перейдемо до практики.

Як використовувати сніпети

Оголосити сниппет потрібно таким чином:

@mixin function_name($var1, $var2,...) { 
// code
}

Щоб використовувати шаблон, його ім’я потрібно вказувати після команди include:

@include functin_name(var1, var2...);

Шаблон можна використовувати будь-яку кількість разів.

Приклади шаблонів Sass

Хоч це і звучить на перший погляд заплутано, варто один раз розібратися, і далі ви не зможете верстати без Sass. Здається, я це вже говорив раніше…

Скруглення кутів (border-radius)

Скруглення кутів.

@mixin border-radius($radius) { 
 -webkit-border-radius: $radius; 
 -moz-border-radius: $radius; 
 -ms-border-radius: $radius; 
 border-radius: $radius; 
}

Приклад:

@include border-radius(3px);

Тривалість зміни стилю (transition-duration)

Час в секундах або мілісекундах, який триватиме зміна CSS-стилів. Я писав раніше, як цією властивістю можна плавно міняти колір посилань.

@mixin duration($a) { 
-webkit-transition-duration: $a; 
-o-transition-duration: $a; 
-moz-transition-duration: $a; 
transition-duration: $a; 
}

Приклад:

@include duration(2s);

Поворот (rotation)

Поворот об’єктів.

@mixin rotate($d) { 
 transform:rotate($d+deg); 
 -ms-transform:rotate($d+deg); 
 -webkit-transform:rotate($d+deg); 
 -o-transform: rotate($d+deg); 
}

Приклад:

@include rotate(-90);

Тінь об’єктів (box-shadow)

Тінь для об’єкта. У функцію передаються відступ зліва, зверху, радіус розмиття і колір тіні.

@mixin box-shadow($left, $top, $blur, $color){ 
 -moz-box-shadow: $left $top $blur $color; 
 -webkit-box-shadow: $left $top $blur $color; 
 box-shadow: $left $top $blur $color; 
}

Примклад:

@include box-shadow(0, 5px, 15px, #ff6600);

Прозорість (opacity)

Функція отримує параметр прозорості як відсоток без значка %.

@mixin opacity($p) {
 opacity: $p*0.01;
 -webkit-opacity: $p*0.01;
 -khtml-opacity: $p*0.01;
 -moz-opacity: $p*0.01;
 filter:alpha(opacity=$p);
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$p)";
}

Приклад:

@include opacity(50);

Фон з градієнтом

Ця функція «намалює» об’єкту вертикальний кросбраузерності CSS3 градієнт. Передаємо верхній колір і нижній.

@mixin bg($top, $btm) {
 background: $top;
 background: -moz-linear-gradient(top, $top 0%, $btm 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$btm));
 background: -webkit-linear-gradient(top, $top 0%,$btm 100%);
 background: -o-linear-gradient(top, $top 0%,$btm 100%);
 background: -ms-linear-gradient(top, $top 0%,$btm 100%);
 background: linear-gradient(to bottom, $top 0%,$btm 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top', endColorstr='$btm',GradientType=0 );
}

Приклад:

@include bg(#aaaaaa, #efefef);

Колір кордонів (border-left, right…)

Функція отримує колір кордону і місце (зверху, знизу, зліва, справа або з усіх боків), куди його застосувати до об’єкта.

@mixin border($place, $color, $width) {
 @if $place == 'all' {
 border: $width solid $color;
 } @else {
 border-#{$place}: $width solid $color;
 }
}

Приклади:

@include border(bottom, #ff00ff, 2px); // жахлива фіолетова межа знизу
@include border(left, darkred, 1px); // темно-червона межа зліва
@include border(all, #000, 1px); // чорна межа по всьому периметру

Для деяких проектів подібні функції теж можна спростити. Так, якщо ви знаєте, що ніде не будете використовувати кордон товщиною 1 піксель, то параметр товщини можна з неї виключити:

@mixin border($place, $color) {...}

Успішної розробки!

Коменти

Ольга

Спасибо за статью! Интересует вопрос использования миксинов для кроссбраузерности в респонсиве. В медиазапросах вложенные миксины выносятся вверх, и ограничение по ширине экрана не работает для свойств в миксине…

Денис

Еще была бы интересна статья по встроенным миксинам Compass-а, на русском языке что-то не нашёл. Хотя на ютубе, вижу, народ активно пользуется.

Дамир

Привет классная статья, тут все миксины или есть еще?
Здесь “@incude bg(#aaaaaa, #efefef);”, забыл букву “L”

Назар Токарь

Спасибо, обновил! Миксины можно писать какие угодно, эти я просто предлагаю как основу для упрощения работы.

Artem Medvedev

Все круто, спасибо за метериал, но одна из килерфич SASS это библиотека миксинов Compass, зачем делать то что уже есть?
Тем более если речь идет о CSS3 свойствах и браузерных префиксах, то Compass смотрит на can i use и всегда подставляет только нужные префиксы. К примеру border-radius поддерживается во всех браузерах ie9+ без префикса и использовать миксин в этом случае не нужно.
А еще напиши обзор на грид фреймворк Susy, это в разы лучше всех bootstrap и foundation.
Здорово что в русскоязычном комьюнити все больше людей пользующихся SASS

Назар Токарь

@Artem Medvedev, еще есть Bourbon, тоже крутая штука. Но это уже надстройка. Чтобы использовать миксин, нужно изучить, как он работает. А в случае своих сниппетов ты уже и сам знаешь, как они работают. Для небольших проектов это проще.

Susy хорошая штука, но я бы для начинающих его не рекомендовал. Если хочешь другую сетку, нужно лезть в исходник и компилировать новые классы. А в бутсрапе просто меняешь col-sm-7 на col-sm-3 :).

Спасибо за мнение, всегда приятно пообщаться с коллегой.

Артем

@Назар Токарь, Поддерживаю, про Susy очень мало информации на русском. Ждем обзор

Назар Токарь

@Артем, мне вот интереснеее про haml написать :).

Artem Medvedev

@Назар Токарь, это да, работать с Compass не понимая как он работает глупо)

да нет, в susy нет никаких классов :)
ты просто в css пишешь такой то блок занимает столько то колонок, а в связке с плагином breakpoint резиновые сетки абсолютно любой сложности делаются на раз два, да и html остается чистым без презентационных классов bootstrap
к примеру мне нужно сделать layout на 3-4 разрешения, половина html кода будет в col-md-8 и тд.
На самом деле кто как привык и кому как удобнее, но если освоить SASS не вызвало сложностей, то с Compass и Susy все будет гораздо проще.
p.s. bootstrap как по мне лучше для быстрого прототипирования макетов, и там всего 12 колонок, в большинстве случаев этого достаточно конечно)

Назар Токарь

@Artem Medvedev, кстати, если вас пугает излишний код и нет тонны асинхронных запросов, то можно легко заставить его похудеть при помощи unCSS :).

Хм, я вот лично не увидел в Susy особого удобства. Если нужна только сетка, можно взять 960.gs и вообще не использовать ничего с весом больше 2кб :).

Артем

Очень легко и интересно пишите, спасибо! Подписался на обновление