Типи даних в Sass

23

Від автора: майже у всіх мовах програмування є типи даних, і Sass не виняток. Тип даних – це спосіб класифікації даних за певним категоріям для різних цілей. Наприклад, 2 – це тип number, а SitePoint – тип string. У цій статті я розповім вам про всі сім типів даних в Sass, а також покажу приклад використання кожного типу даних.

Null

Null – самий базовий з усіх типів даних в Sass. Це не true і не false, даний тип просто означає порожнечу. Значення даного типу даних немає. Вам потрібно лише знати, що будь-яка неправильна запис «null», навіть якщо одна буква записана не в тому регістрі, вже не є null. А значить, ні NULL ні Null не є типом даних null. Це вже будуть рядки.

Хоча null означає порожнечу, якщо пропустити його через функцію length(..), на виході вийде 1, так як сама змінна існує, а null сам по собі є показником відсутності значення. Змінну типу null не можна приєднати за допомогою конкатенації рядків. Запис ‘text’ + null буде неправильною і викличе помилку.

Булев тип даних

Тип даних за двома можливими значеннями, true і false. У Sass тільки два значення оцінюються як false: власне, сам false або null. Все інше повертає true. Розглянемо нижче код:

$i-am-true: true;
$a-number: 2;
body {
@if not $i-am-true {
background: rgba(255, 0, 0, 0.6);
} @else {
background: rgba(0, 0, 255, 0.6); // expected
}
}
.warn {
@if not $a-number {
color: white;
font-weight: bold;
font-size: 1.5 em;
} @else {
display: none; // expected
}
}

У коді я поставив дві змінні $i-am-true і $a-number. Перед поясненням коду скажу, що оператор not Sass еквівалентний оператору ! в інших мовах. А отже, умова @if not $i-am-true – те ж саме, що if (!$i-am-true), і воно буде дорівнює false, так як $i-am-true – істина. Результат можна подивитися в демо нижче.

Як я сказав вище, все крім false null оцінюється як true. Тобто змінна $a-number буде true. Тому параграф з класом warn не буде показуватися. У демо нижче видно, що так воно і є.

Числовий тип даних Number

Числа в CSS використовуються всюди. Здебільшого вони записані з різними одиницями вимірювання, але технічно це все ще числа. Ну і природно в Sass теж є тип даних numbers. З числами можна проводити прості математичні операції. Варто пам’ятати, що операції можна проводити над числами з сумісними одиницями вимірювання. Наприклад:

$size: 18; // Число
$px-unit: $size * 1px; // Пікселі
$px-string: $size + px; // Рядок
$px-number: $px-unit / 1px; // Число

У нас є 4 змінні. $size – звичайне число. $px-unit – результат множення $size на 1px, при цьому тип даних тепер пікселі. У змінній $px-string записано значення 18px, але це не число, це рядок. Сама по собі запис px сприймається як рядок, а результатом додавання рядка і числа буде рядок. Значення змінної $px-number отримано шляхом ділення $px-unit на 1px, що перетворює цю змінну в просте число. Погляньте на код нижче, я використовував ці змінні в стилях кнопки:

.button {
background: rgba(255, 0, 0, $px-number * 3 / 100);
padding: $px-unit / 2;
border-radius: $px-string * 3; // throws error
margin-top: $px-number * 2px;
}

Властивості background значення rgba(255, 0, 0, 0.54). Властивість padding також буде нормально працювати. А ось властивість border-radius викине помилку, так як не можна рядок помножити на число. У демо нижче я стилізував кілька елементів на основі даних значень.

Рядка

З допомогою рядків в CSS задаються різні стилі шрифтів, а також інші властивості. Sass, як і CSS, приймає як рядки в лапках і без лапок, навіть якщо в них є прогалини. Варто пам’ятати, що рядки зі спеціальними символами можуть видавати помилки. Наприклад:

$website: ‘SitePoint’; // значення SitePoint
$name: ‘Gajendar’ + ‘Singh’;
// ‘Gajendar Singh’
$date: ‘Month/Year :’ + 3/2016;
// ‘Month/Year : 3/2016’
$date: ‘Month/Year :’ + (3/2016);
// ‘Month/Year : 0.00149’
// Так як 3/2016 обчислюється в першу чергу.
$variable: 3/2016; // одно 0.00149
$just-string: ‘3/2016’; // ‘3/2016’

В змінну $name нічого незвичайного, там зберігається звичайна рядок. Цікавіше другий вираз – значення 3/2016 не вычислилось, але розпізналося як рядок. Тобто рядки можна легко приєднувати до інших типів даних, крім null.

У третьому вираженні змінна обчислюється як зазвичай, так як там всього один рядок. А якщо немає конкатенації, значить, мінлива буде відразу обчислена. Якщо потрібно оголосити запис 3/2016 рядком, використовуйте лапки, як в останньому виразі.

Також варто сказати, якщо вам необхідно використовувати змінну усередині рядка, вам доведеться скористатися «інтерполяцією змінних». А якщо простіше, вам потрібно буде загорнути змінні #{}. Приклад:

$name: ‘Gajendar’;
$author: ‘Author : $name’; // ‘Author : $name’
$author: ‘Author : #{$name}’;
// ‘Author : Gajendar’

Метод інтерполяції може стати в нагоді, якщо значення змінної залежить від умови. Демо:

Кольори

Кольори в CSS підпадають під тип даних color. Кольори можна задавати в шістнадцятковій системі числення rgb, rgba, hsl і # hsla-color hsla чи можна використовувати ключові слова типу pink, blue і т. д. Sass робить використання кольорів більш ефективним. Приміром, у Sass можна зберігати значення кольорів! Розглянемо маніпуляції з кольором в Sass:

$color: yellowgreen; // #9ACD32
color: lighten($color, 15%); // #b8dc70
color: darken($color, 15%); // #6c9023
color: saturate($color, 15%); // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red); // #ff8000

Якщо вам цікаво, як Sass складає кольору, то я зараз поясню. Перед складанням квітів Sass поділяє всі колірні канали і складає їх окремо. Тобто якщо скласти червоний зі значенням #ff0000 і зелений зі значенням #008000, ми отримаємо колір #ff8000. Також варто знати, що за допомогою даного методу можна складати кольору з різними значеннями прозорості.

Призначення всіх інших функцій можна вгадати за їх назвами. Функція Lighten освітлює колір до заданого значення і т. д. В codepen демо представлені всі функції:

Списки

Якщо ви знайомі з масивами, то швидко зрозумієте, як працюють списки. Списки – аналог масивів у Sass. Вони можуть зберігати нуль, одне або декілька значень, а також інші списки. Щоб створити список зі значеннями різних типів, значення необхідно відокремити за допомогою роздільника – пробіл або кома. Погляньте на наступний код:

$font-list: ‘Raleway’,’Dosis’,’Lato’;
// Елементи розділені трьома комами
$pad-list: 10px 8px 12px;
// Елементи розділені трьома пропусками
$multi-list: ‘Roboto’,15px 1.3 em;
// Багатовимірний список з двома списками всередині.

У списку можна зберігати кілька типів значень. У перших двох списках зберігаються за 3 елемента. В останньому списку всього два елемента, розділених комою. Перший елемент – рядок ‘Roboto’, другий елемент – ще один список з двох елементів, розділених пропуском. Тобто Різні розділювачі в одному списку створюють вкладені списки. Списки вкрай корисні в циклах, що наочно показує демо нижче:

Для отримання елемента списку я використовував функцію nth($list, $n). За посиланням ви знайдете ще більше корисних функцій.

Таблиці

Таблиці в Sass це ті ж асоціативні масиви. В таблиці зберігається ключ і прив’язане до нього значення. Таблиці завжди записуються в круглих дужках, а елементи відокремлюються один від одного за допомогою коми. Ключ може мати лише одне значення, а значення може асоціюватися з безліччю ключів. Запам’ятайте, що ключі в таблицях можуть бути будь-якого типу, можуть бути навіть таблицею. Як створювати і використовувати таблиці:

$styling: (
‘font-family’: ‘Lato’,
‘font-size’: 1.5 em,
‘color’: tomato,
‘background’: black
);
h1 {
color: map-get($styling, ‘color’);
background: map-get($styling, ‘background’);
}

У коді вище ми створили таблицю $styling, в якій зберігаються пари ключ/значення для різних властивостей CSS. Для роботи з таблицями були створені різні функції. Я використав одну з таких функцій map-get. Вона приймає два параметри, саму таблицю і ключ значення, яке необхідно витягнути. Я використав цю функцію для стилізації заголовка першого рівня h1.

Для отримання доступу до всіх парах таблицю можна прогнати через цикл. У демо нижче показано, як це зробити:

Висновок

Самі по собі типи даних в Sass можуть здаватися не такими і потрібними, проте при правильному використанні і в поєднанні з іншими можливостями Sass вони можуть творити дива. Таблиці та списки – найбільш складні типи даних в Sass. Тому я вирішив написати побільше уроків про те, як з ними працювати.