Назар Токар
Опубліковано: 5 Липня 2014
Оновлено: 8 Травня 2017

Недавно я объяснял, что такое 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) {...}

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    10 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

    Привет классная статья, тут все миксины или есть еще?

    Здесь "@incude bg(#aaaaaa, #efefef);", забыл букву "L"

    Автор
    Назар Токар

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

    Все круто, спасибо за метериал, но одна из килерфич SASS это библиотека миксинов Compass, зачем делать то что уже есть?

    Тем более если речь идет о CSS3 свойствах и браузерных префиксах, то Compass смотрит на can i use и всегда подставляет только нужные префиксы. К примеру border-radius поддерживается во всех браузерах ie9+ без префикса и использовать миксин в этом случае не нужно.

    А еще напиши обзор на грид фреймворк Susy, это в разы лучше всех bootstrap и foundation.

    Здорово что в русскоязычном комьюнити все больше людей пользующихся SASS

    Автор
    Назар Токар

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

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

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

    @Назар Токарь, это да, работать с 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кб :).

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

    Автор
    Назар Токар

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

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