5 Липень 2014
8 263
Рубрика: код

Шаблоны (сниппеты) для Sass

Я собрал несколько часто повторяющихся шаблонов (сниппетов) верстки, которые необходимы верстальщику, но из-за поддержки кроссбраузерности засоряют код. Здесь вы узнаете, как “дружить” со старыми браузерами и не копаться в лишнем коде.

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

Зачем нужны Sass-сниппеты? Проще объяснить на примере. Возьмем прозрачность. Начиная c IE10 и современных версий Firefox, Opera, Chrome, прозрачность объекта можно указать простым свойством:

.transp {
opacity: 0.5;
}

Но в устаревших версиях браузеров это работать не будет. В таком случае нужно указывать “хаки” для всех пациентов. Если нужно добавить несколько видов прозрачности, для каждого из классов вместо одной строки придется добавлять пять. Аналогичная ситуация с фонами CSS-3, тенью объектов и текста, поворотов (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) {...}

Успешной разработки!

Тепер я хочу бачити коментарі 10