От автора: в Sass есть множество встроенных функций, с помощью которых можно намного быстрее и легче настроить стили для проекта. Давайте изучим их!
Sass функции darken и lighten
Вероятно, две самые известные функции из этого списка. Я зачту их за одну, так как они делают одно и то же, но в разных направлениях.
Насколько можно понять из названий, darken и lighten затемняют и осветляют цвет в процентном соотношении. Эти функции можно использовать на состояниях hover на кнопках или же во всем сайте для создания иерархии. Вот так:
|
1 2 3 |
$main-color: #6dcff6; $darker-color: darken($main-color, 20%); $lighter-color: lighten($main-color, 20%); |
Второй аргумент в этих двух функциях принимает процентное значение, на которое нужно затемнить/осветлить цвет. Так вам не нужно будет каждый раз при взаимодействии с чем-либо подбирать hex-код, который будет чуть-чуть светлее. Например, можно сделать так:
|
1 2 3 4 5 6 7 8 9 10 11 |
.brand-button { background: $main-color; } .brand-button:hover { background: $lighter-color; } .brand-button:visited { background: $darker-color; } |
Что компилируется в следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
.brand-button { background: #6dcff6; } .brand-button:hover { background: #cdeffc; } .brand-button:visited { background: #0fafee; } |
С помощью этих функций можно создать эффективную цветовую палитру, которая будет одинаковой во всем проекте. Например, если у вас есть цвета подсветки и неактивного состояния, которые завязаны на основной цвет бренда, а клиент вдруг решит сменить главный цвет в процессе разработки (это происходит чаще, чем мне хотелось бы…), то вам нужно будет сменить всего одно значение, а все остальные каскадируются на оставшийся сайт.
Sass функции opacify и transparentize
Опять функции работы с цветом. Функции opacify и transparentize делают цвета более или менее непрозрачными.
Я лично на себе проверил их удобство. С ними очень удобно работать с модальными и другими всплывающими окнами, в которых, обычно, нужно затемнять задний контент.
|
1 2 3 |
$main-color: rgba(0, 0, 0, 0.5); $opaque-color: opacify($main-color, 0.5); $transparent-color: transparentize($main-color, 0.3); |
В отличие от darken и lighten, второй аргумент в этих функциях должен быть десятичным числом от 0 до 1, а не процентами. Эти функции полезны для цветов, основанных на одном основном цвете бренда, которые присутствует во всем проекте. И опять же, с помощью этих функций можно изменить всего один основной цвет, а все остальные каскадируются за ним.
Значения, полученные с помощью opacify и transparentize, можно использовать следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 |
.modal.focus { background: $main-color; } .modal.blur { background: $transparent-color; } .main-content { background: $opaque-color; } |
Что компилируется в следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
.modal.focus { background: rgba(0, 0, 0, 0.5); } .modal.blur { background: rgba(0, 0, 0, 0.2); } .main-content { background: black; } |
Данный эффект можно воспроизвести с помощью fade-in и fade-out, синонимов opacify и transparentize.
Sass функция complement
Как можно понять из названия, complement вернет пару к любому цвету, который будет передан в качестве параметра. Особенно удобно, если необходимо создать CTA-элемент на странице или виде и необходимо добавить чуть больше визуального контраста. С этой функцией можно забыть про цветовое колесо.
|
1 2 |
$main-color: #6dcff6; $call-to-action: complement($main-color); //=> что вернет #f6946d |
Sass функция percentage
С помощью числовых функций Sass можно создавать свои функции и циклы. Функция percentage, например, конвертирует любое число в проценты следующим образом:
|
1 2 |
width: percentage(0.16) //=> что вернет 16% width: percentage(100px/50px); //=> что вернет 200% |
Функция percentage не смотрит даже, передали вы единицы измерения типа px в значение или нет. Такая способность делает эту функцию превосходной для простого преобразования типографских или адаптивных значений, где проценты играют решающую роль. Очень крутая функция!
Sass функция if
В Sass есть возможность писать обычные выражения if с помощью @if. Препроцессор отлично заменяет условия, которые можно встретить в обычном языке программирования.
В Sass также есть инлайновая функция if, которая работает почти как тернарный оператор в ряде языков программирования:
|
1 2 3 |
.foo { width: if( 1 > 2, 400px, 500px); //=> this will return 500px } |
Функция принимает три аргумента. Первый – условие, второй – значение, присваиваемое при выполнении условия, третий – значение, если условие не выполняется.
Эту тернарную функцию можно использовать в том случае, если необходимо создать условие с переменной (например, если ширина тега article больше тега aisde) в стилях. Тем не менее, возможностей у этой функции намного больше.
Лично мне нравится использовать if в адаптивных проектах. С помощью этой функции можно менять свойства, основанные на несвязанных переменных (например, font-size элемента в зависимости от width его контейнера), а также создавать свойства, основанные на переменных, которые меняются под разные экраны и дисплеи (как смена фонового изображения тега на ретина экранах).
Заключение
В Sass есть ряд полезных встроенных функций, и они не ограничены теми, что вам предоставляет Compass. Использовать их или нет – решать вам. В конце концов, все зависит от того, как вы работаете, от вашего проекта, команды и сроков.
Знаете Sass или Compass функции, которые, по вашему мнению, стоит включить в этот список, или вы просто считаете их полезными в своих проектах? Пишите их в комментариях на нашем сайте Webformyself.
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
