Вивчаємо LESS: Використання функцій

12

Від автора: ми продовжуємо нашу серію статей Вивчаємо LESS і сьогодні розглянемо, як використовуються в LESS функції, які допоможуть вам писати більш чистий код. Якщо ви ще не читали наші попередні чотири публікації по цій темі, ознайомтеся зі статтями Введення, Змінні, Міксини і Вкладені правила.

План статей серії:

Вступ

Використання Змінних

Використання Миксинов

Використання Вкладених правил

Використання Функцій

Розділяй і володарюй

Застосування на практиці

Прийшов час зайнятися функціями LESS, і повірте, вам доведеться напружити мозок, щоб розібратися в тому, як ці функції можуть бути застосовані в CSS.

Операції

Перший тип «функцій», які ми розглянемо, це Операції. LESS, можна сказати, виділяє їх з-поміж решти функцій, але по факту вони роблять те ж саме, тому я і об’єднав їх в одну групу з іншими.

Якщо по-простому, операції – це звичайні арифметичні дії. Якщо складніше – ми використовуємо операції, щоб швидко і динамічно змінювати пікселі, відсотки, еми, кольору і багато іншого — завдяки одній лише рядку коду — а також зберігати їх відносну зв’язок з вихідним елементом. Давайте розглянемо реальний приклад.

Ви створюєте для клієнта веб-сайт на WordPress і працюєте над стилями елемента blockquote, тобто блоку цитування. Зокрема, ви хочете змінити шрифт Helvetica на Georgia, додати курсив і трохи збільшити розмір. Але, якщо ви працюєте з темою WordPress, ви даєте користувачам можливість змінювати розмір шрифту в панелі керування, але при цьому не хочете давати їм можливість редагувати розмір шрифту елемента blockquote (тому, що хочете зберегти відповідні пропорції між двома шрифтами).

Отже, щоб задати розмір, можна використовувати LESS, який допоможе швидко задати розмір шрифту blockquote в залежності від базового розміру. Давайте розглянемо LESS. [Примітка: У цих прикладах LESS я використовую ті аспекти, які ми вивчили раніше, в тому числі змінні, міксини та інші. Якщо якісь моменти здаються вам незрозумілими, будь ласка, прочитайте попередні статті серії.]

// Змінні для прикладу
// ———————
@baseFontSize: 16px;
@baseFontFamily: Helvetica, sans-serif;
@quoteFontFamily: Georgia, serif;
// LESS для стилів рядків і блоків цитування
// ——————————————
p {
font-family: @baseFontFamily;
font-size: @baseFontSize;
}
blockquote {
font-family: @quoteFontFamily;
font-size: @baseFontSize + 4;
}

Зверніть увагу на розмір шрифту для blockquote. Ми не створювали нову змінну для розміру шрифту blockquote, ми просто взяли змінну @baseFontSize і додали до неї 4! Для чого ми це зробили? LESS може коректно визначити, яка одиниця вимірювання задається і потім присвоїти це число даної одиниці. У цьому прикладі LESS повинен додати 4px до розміру шрифту елемента blockquote. Давайте подивимося на скомпільований LESS:

p {
font-family: Helvetica, sans-serif;
font-size: 16px;
}
blockquote {
font-family: Georgia, serif;
font-size: 20px;
}

І дійсно, LESS додав 4 одиниці до шрифту з розміром 16px, таким чином ми отримали елемент blockquote з розміром шрифту 20px.

Крім математичних обчислень представлених вище, можна виконувати більш складні, такі як множення, ділення, вирахування, додавання круглі дужки, щоб вказати порядок операцій, і ставити нові змінні з операціями. Кілька прикладів:

@specialWidth: @baseWidth * 2;
@megaFont: (@baseFontSize * 14) — 10;

Операції з кольором

Операції, які ми розглянули вище, можуть виконуватися і за кольором, це робиться точно також, як і з одиницями виміру. Кольори також можна створювати і змінювати за допомогою арифметичних дій. Якщо ви не дуже добре знайомі з тим, як створювати і розраховувати шістнадцяткові кольору, ознайомтеся зі сторінкою W3Schools. Їх розрахунки можуть здатися досить складним, але вони дуже ефективні. Ось простий приклад того, як робити обчислення з шістнадцятковими квітами:

// LESS
// —-
@color: #888 — #222;
h2 { color: @color; }

І скомпільований CSS:

h2 {
color: #666666;
}

Здорово, чи не правда? Однак, це ще не все, що LESS може зробити з квітами. Сама родзинка – це вбудовані функції квітів. Оскільки я не зможу пояснити тему колірних функцій краще, ніж офіційний веб-сайт LESS, ось кілька вбудованих функцій квітів LESS:

lighten(@color, 10%); // повертає колір на 10% *світліше*, чим @color
darken(@color, 10%); повертає колір на 10% *темніше* чим @color
saturate(@color, 10%); // повертає колір на 10% *більше* насичений, ніж @color
desaturate(@color, 10%); // повертає колір на 10% *менш* насичений, ніж @color
fadein(@color, 10%); // повертає колір на 10% *менш* прозорий, ніж @color
fadeout(@color, 10%); // повертає колір на 10% * більше* прозорий, ніж @color
fade(@color, 50%); // повертає @color з прозорістю 50%
spin(@color, 10); // повертає колір з відтінком на 10 більше, ніж @color
spin(@color, -10); // повертає колір з відтінком на 10 менше, ніж @color
mix(@color1, @color2); // повертає мікс кольорів @color1 і @color2

Завдяки всім цим функціям кольорів, можна задати для початку всього кілька простих квітів, щоб розробити цілу палітру.

Математичні функції

І останніми за порядком, але не за значенням, ми розглянемо математичні функції, надані LESS, їх можна застосовувати до чисел в коді LESS. До цих функцій відносяться round(), ceil(), floor() і percentage(). Якщо ви додасте в ці функції певні числа, вони будуть завжди округлятися до більшого або меншого значення, або перетворитися на відсотки.

По правді кажучи, я планую ще як слід поекспериментувати з математичними функціями у файлах LESS, але я безумовно вірю, що вони відкривають багато можливостей, особливо що стосується округлення чисел та їх вираження в процентному співвідношенні, що дозволяє потім задавати їх як оголошення для селектора.

Висновок

Це був короткий огляд функцій LESS. Коли будете писати код для сайтів, ви можете копнути набагато глибше, і, якщо у вас з’являться відмінні приклади використання LESS, залишайте посилання в коментарях нижче! Наш наступний пост буде називатися Розділяй і Володарюй – ми поговоримо про те, як зробити з LESS модульний, багаторазово використовується, чистий і організований код. До скорого!