Недавно я объяснял, что такое 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 Комментарий на "Шаблоны (сниппеты) для Sass"

    Уведомлять
    avatar
    5000
    Денис
    Гость

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

    Дамир
    Гость

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

    Artem Medvedev
    Гость

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

    Artem Medvedev
    Участник
    @Назар Токарь, это да, работать с Compass не понимая как он работает глупо) да нет, в susy нет никаких классов :) ты просто в css пишешь такой то блок занимает столько то колонок, а в связке с плагином breakpoint резиновые сетки абсолютно любой сложности делаются на раз два, да и html остается чистым без презентационных классов bootstrap к примеру мне нужно сделать layout на 3-4 разрешения, половина html кода будет в col-md-8 и тд. На самом деле кто как привык и кому как удобнее, но если освоить SASS не вызвало сложностей, то с Compass и Susy все будет гораздо проще.… Читать дальше »
    Артем
    Гость

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

    Артем
    Гость

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

    wpDiscuz