Використання змінних · Less
У будь-якій повноцінній мові програмування єзмінні (від англ. variables), які являють собою іменовану область пам'яті і дозволяють записувати якісь дані. Змінні дають можливість звертатися себе на ім'я, і навіть змінювати присвоєні їм значення.
Змінні, що мають заздалегідь заданий тип даних, з яким можуть працювати, називають типизированными. Такі змінні можуть працювати тільки з даними заданого типу і, якщо спробувати присвоїти значення іншого типу, то на нас чекатиме помилка компіляції. Відповідно, якщо змінним можна надавати значення будь-якого типу, їх називають динамічними.
Зазвичай змінні перевизначувані, тобто при ініціалізації в них можна записати значення і, під час роботи програми, змінювати його стільки разів, скільки потрібно розробнику. На жаль, існують змінні з незмінними значеннями – неперевизначені.
У Less змінні динамічні, перевизначені та потребують ініціалізації.
Будь-яка змінна в Less ініціалізується як директива, тобто з використанням символу собачки (@) на початку.
Щоб використовувати значення змінної під час написання коду, необхідно її викликати. Робиться це так:
Збереження даних
У змінних можна зберігати будь-які дані, що підходять під шаблон @name: value; . Для прикладу я підібрав кілька значень, які можна надати змінним:
Операції зі змінними (оператори)
Оператором називається щось, що приймає одне або більше значень (або виразів, якщо говорити на жаргоні програмування), і обчислює нове значення (отже, вся конструкція може розглядатися як вираз).
У Less є два режимиінтерпретації операцій із висловлюваннями: простий і суворий.
Арифметичні операції (звичайний режим)
Дозволяється здійснювати операції з виразами, значення яких відповідають рядкам.
«*» - ігнорується за умови, що проводиться операція з явно зазначеним рядком у виразі не через змінну, а безпосередньо. Інакше помилка.
Арифметичні операції (суворий режим)
Для включення суворого режиму арифметичних операцій необхідно взяти вирази у круглі дужки (вираз). У такому режимі забороняється виконувати операції з рядками.
Перелічені в таблицях операції можна проводити з числами, рядками, кольорами та числами із зазначеною розмірністю. Нижче представлена таблиця, що демонструє операцію та її результат з різними вхідними даними.
Екранування
Екранування — це заміна символів керування на відповідні текстові підстановки. Робиться це для того, щоб використовувати деякі рядкові конструкції в рамках мови, які компілятор може прийняти за конструкції самої мови.
У Less такою небезпечною конструкцією можуть стати фільтри, які для IE часто набувають вигляду:
Якщо спробувати скомпілювати цей блок коду, компілятор нариватиметься на помилку і люб'язно повідомлятиме її нам:
Зрозуміло, нічого хорошого з цього не вийде, але вирішення цієї проблеми, як говорить назва розділу - екранування.
Екранування в Less може здійснюватися двома способами. Перший шлях передбачає використання функції e() , а другий — синтаксичної конструкції
''. Обидва способи очікують на вході рядок, оточений лапками, які будуть видалені при компіляції.
Екранування за допомогою функції e() вважається застарілим. Творці Lessпропонують повсюдно впроваджувати синтаксичну конструкцію
"" або її аналог з одинарними лапками.
Області видимості
Практично у всіх мовах програмування є базові області видимості (від англ. scope), що являють собою область програми, в якій доступне значення оголошеної змінної. Якщо змінна оголошена всередині функції, її область видимості обмежується цією функцією, а сама змінна називається локальної. Якщо ж змінну оголошено поза функцією, то вона — глобальна.
Less дуже схожий на мову програмування і має дві області видимості, але з різницею в тому, що функціями вважаються селектори і домішки. Якщо змінна оголошена всередині селектора чи домішки, вона локальна, якщо ні, то глобальна.
Свою область видимості в Less створюють селектори, посилання на батька селектора (&) і домішки.
Приклад 3.1.1
Розглянемо приклад, що демонструє роботу змінних та області видимості в Less.
Створимо файл _styles.less і додамо кілька глобальних змінних і селекторів.
При компіляції виникне помилка через те, що змінна @block-font-size локальна і не може бути використана поза селектором .block . При цьому глобальні змінні ніяких помилок породити не можуть, оскільки вони доступні в усьому коді.
Лініве завантаження
Змінні в Less настільки ліниві, що їх можна оголошувати до безпосереднього застосування (виклику) і після нього. Теоретично це означає, що змінна ініціалізується в точці її виклику, а це означає, що ви можете використовувати змінні до того, як ви їх оголосите.
Після компіляції вийде наступний код:
Але при такому використанні слід пам'ятати, що локальні змінні переважають за важливістюСвітові. Це правило описано раніше у частині «Області видимості». Тобто, якщо використовувати дві однакові на ім'я змінні, але одна з них буде локальною, а інша глобальною, то все залежатиме від їхнього місця визначення та використання.
Після компіляції властивості width буде надано значення 100px :
У цьому заплутаному блоці коду відбуваються немислимі речі, що відображають всю суть лінивого завантаження. Розглянемо те, що відбувається, більш докладно:
Не варто запам'ятовувати чи заучувати все, що відбувається в цій частині глави, просто будьте впевнені, якщо змінна оголошена найнижче, то застосовуватиметься саме вона. Вочевидь, що у її локальності чи глобальності.
Змінні за замовчуванням
На підставі «лінивого завантаження» в Less надається можливість організації змінних за умовчанням. Можливо, це не такий зручний та явний спосіб, який пропонує Sass, але, проте, таке практикується, потрібно знати та використовувати на благо своїх цілей.
Нижче наведено код, в якому перевизначається змінна @color-green. Виходить, що у файлі бібліотеки замість глобальної змінної, оголошеної всередині неї, буде використано передану змінну @color-green зі значенням #003300 .
Така поведінка може стати в нагоді при використанні бібліотек або фреймворків, в яких розробнику необхідно перевизначити змінні. Але ви повинні розуміти, що насправді значення змінних не змінюються, а відбувається те саме «ледаче завантаження».
Перевизначення змінних робить налаштування структур, таких як Bootstrap 3, більш гнучкою та простою. Але про це я розповім вам у відповідному розділі.