Sass функции — усиление стилей и расширение возможностей

Sass функции — усиление стилей и расширение возможностей

От автора: в Sass есть множество встроенных функций, с помощью которых можно намного быстрее и легче настроить стили для проекта. Давайте изучим их!

Sass функции darken и lighten

Вероятно, две самые известные функции из этого списка. Я зачту их за одну, так как они делают одно и то же, но в разных направлениях.

Насколько можно понять из названий, darken и lighten затемняют и осветляют цвет в процентном соотношении. Эти функции можно использовать на состояниях hover на кнопках или же во всем сайте для создания иерархии. Вот так:

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

Второй аргумент в этих двух функциях принимает процентное значение, на которое нужно затемнить/осветлить цвет. Так вам не нужно будет каждый раз при взаимодействии с чем-либо подбирать hex-код, который будет чуть-чуть светлее. Например, можно сделать так:

.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}

Что компилируется в следующий код:

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}

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

Sass функции opacify и transparentize

Опять функции работы с цветом. Функции opacify и transparentize делают цвета более или менее непрозрачными.

Я лично на себе проверил их удобство. С ними очень удобно работать с модальными и другими всплывающими окнами, в которых, обычно, нужно затемнять задний контент.

$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, можно использовать следующим образом:

.modal.focus {
  background: $main-color;
}

.modal.blur {
  background: $transparent-color;
}

.main-content {
  background: $opaque-color;
}

Что компилируется в следующий код:

.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.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Sass функция complement

Как можно понять из названия, complement вернет пару к любому цвету, который будет передан в качестве параметра. Особенно удобно, если необходимо создать CTA-элемент на странице или виде и необходимо добавить чуть больше визуального контраста. С этой функцией можно забыть про цветовое колесо.

$main-color: #6dcff6;
$call-to-action: complement($main-color); //=> что вернет #f6946d

Sass функция percentage

С помощью числовых функций Sass можно создавать свои функции и циклы. Функция percentage, например, конвертирует любое число в проценты следующим образом:

width: percentage(0.16) //=> что вернет 16%
width: percentage(100px/50px); //=> что вернет 200%

Функция percentage не смотрит даже, передали вы единицы измерения типа px в значение или нет. Такая способность делает эту функцию превосходной для простого преобразования типографских или адаптивных значений, где проценты играют решающую роль. Очень крутая функция!

Sass функция if

В Sass есть возможность писать обычные выражения if с помощью @if. Препроцессор отлично заменяет условия, которые можно встретить в обычном языке программирования.

В Sass также есть инлайновая функция if, которая работает почти как тернарный оператор в ряде языков программирования:

.foo { 
  width: if( 1 > 2, 400px, 500px); //=> this will return 500px
}

Функция принимает три аргумента. Первый – условие, второй – значение, присваиваемое при выполнении условия, третий – значение, если условие не выполняется.

Эту тернарную функцию можно использовать в том случае, если необходимо создать условие с переменной (например, если ширина тега article больше тега aisde) в стилях. Тем не менее, возможностей у этой функции намного больше.

Лично мне нравится использовать if в адаптивных проектах. С помощью этой функции можно менять свойства, основанные на несвязанных переменных (например, font-size элемента в зависимости от width его контейнера), а также создавать свойства, основанные на переменных, которые меняются под разные экраны и дисплеи (как смена фонового изображения тега на ретина экранах).

Заключение

В Sass есть ряд полезных встроенных функций, и они не ограничены теми, что вам предоставляет Compass. Использовать их или нет – решать вам. В конце концов, все зависит от того, как вы работаете, от вашего проекта, команды и сроков.

Знаете Sass или Compass функции, которые, по вашему мнению, стоит включить в этот список, или вы просто считаете их полезными в своих проектах? Пишите их в комментариях на нашем сайте Webformyself.

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree