Від автора: ми продовжуємо серію статей «Вивчаємо LESS», і сьогодні ми поринемо в чудовий світ, де панують LESS Змінні. Обов’язково прочитайте Вступ, якщо ви вперше зіткнулися з цією серією.
Отже, давайте розглянемо змінні LESS і те, що ви можете робити з ними.
Синтаксис
Синтаксис LESS майже ідентичний синтаксису CSS. Творці LESS були дуже передбачливі і зробили його повністю сумісним з CSS, це означає, що ви можете писати CSS прямо в файлах LESS. Це кращий з двох світів! Пам’ятайте про те, що імена файлів LESS повинні мати розширення .less, а не .css.
Змінні
Змінні в LESS починаються зі знака @. Далі слід будь-яка комбінація букв і цифр, тире і підкреслень. Після того, як ви поставили ім’я змінної, вказується двокрапка (CSS), за яким слідує визначення змінної. Для цього можна використовувати шістнадцятковий код кольору (дуже популярно) або рядок, укладену в лапки. Давайте розглянемо декілька змінних і подивимося, як вони будуть відображатися після компіляції.
@blue: #00214D;
@red: #CF142B;
@white: #FFF;
@black: #000;
@baseFontSize: 15px;
@baseLineHeight: 22px;
Дуже просто, вірно? Тепер ви можете використовувати ці змінні в будь-якому з інших LESS-файлів проекту, де ви б використовували шістнадцятковий код.
Це відмінний спосіб зберегти код чистим і легко керованим. Мені, наприклад, подобається ставити один файл LESS, в якому зазначені тільки змінні для розмірів шрифту, квітів, заголовків і т. д. Коли ви використовуєте змінні файлів LESS, вони компілюються в абсолютно зрозумілий CSS. Наприклад.
h1 {
color: @red;
}
h2 {
color: @blue;
}
h3 {
color: @black;
}
p {
color: @black;
font-size: @baseFontSize;
line-height: @baseLineHeight;
}
Компілюється в:
h1 {
color: #CF142B;
}
h2 {
color: #00214D;
}
h3 {
color: #000;
}
p {
color: #000;
font-size: 15px;
line-height: 22px;
}
Установка рядків в якості змінних
Змінні можуть використовуватися не тільки для кольору або розміру шрифту. Ми також можемо встановити змінні для рядків, як і в JavaScript або PHP. Це може виявитися надзвичайно корисним при використанні Icon Fonts у веб-дизайні, так як краще всього встановити Icon Fonts з псевдоэлементами для забезпечення доступності, а не просто вказувати символи в певному класі елементі. Давайте розглянемо змінні для рядків.
@name: “Alex Ball”;
@description: “I love to write and code.”;
a:before {
content: @description;
}
Після компіляції наведеного вище коду ми отримаємо наступне:
a:before {
content: “I love to write and code.”;
}
Якщо ви плануєте використовувати у веб-дизайні Icon Fonts і LESS, обов’язково прочитайте чудові статті Кріса Койера про Icon Fonts, в яких він розповідає про те, як забезпечити їх доступність; ви також знайдете у цих статтях посилання на різні набори шрифтів: платні і безкоштовні.
Висновок
Ми завершили розгляд змінних LESS, і, хоча ця стаття коротше інших, вона надзвичайно цінна. Як я писав у введенні, не соромтеся — завантажуйте LESS.app і пробуйте застосовувати змінні в своїх проектах. Ви будете вражені тим, наскільки це прискорить процес розробки та налагодження.
