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

21

Від автора: в 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;
}

Що компілюється в наступний код:

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

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.