Less. Путеводитель для новичков
Работа с типами данных и единицами измерения
Функции для работы с единицами измерений
При написании примесей может понадобиться проверять переданные параметры при вызове, используя условные конструкции. Для этого Less имеет следующие функции:
convert()
unit()
get-unit()
Давайте поговорим немного подробнее о каждой из них.
Функция convert()
Как несложно догадаться, эта функция преобразует одну единицу измерения в другую. Принцип ее работы очень прост:
Если единицы измерения совместимы, то происходит преобразование и возвращается преобразованное число.
Если единицы измерения не совместимы, то возвращается число без преобразований.
Список поддерживаемых единиц измерения:
Длина: m , cm , mm , in , pt и pc .
Время: s и ms .
Углы: rad , deg , grad и turn .
Например, если нужно конвертировать метры в миллиметры, то функцию следует записать так:
.selector {
content: convert(10m, "mm");
//В результате
//10000mm
}
Функция unit() и get-unit()
Обе функции предназначены для получения информации о переданном числе. Первая функция отбрасывает единицы и возвращает число, а вторая наоборот — отбрасывает число и возвращает единицы измерения.
Посмотрим на результат работы функций, если на вход подать различные данные. Для простоты и наглядности селектор и свойство убраны.
unit(10px) // 10 unit(10rem) // 10 unit(10cm) // 10
// Такой единицы нет в CSS unit(10apple) // 10
Обратите внимание, что функция unit() не анализирует передаваемые ей данные, а просто возвращает число.
Работа с типами данных и единицами измерения |
103 |
Less. Путеводитель для новичков
Однако, если передать строку, то компилятор заподозрит что-то неладное и породит ошибку.
В случае с функцией get-unit() ситуация идентичная, исключая то, что при передаче строки ошибки не будет:
get-unit(10px) // px get-unit(10rem) // rem get-unit(10cm) // cm
//Такой единицы нет в CSS get-unit(10apple) // apple
//Строка
get-unit("10string") // ""
работа с типами данных
Для определения типа данных в Less можно прибегнуть к помощи встроенных функций, которые возвращают логическое значение true или false .
Набор таких функций покрывает все типы, используемые в препроцессоре.
isnumber(value)
isstring(value)
iscolor(value)
iskeyword(value)
isurl(value)
ispixel(value)
isem(value)
ispercentage(value)
isrulesetvalue()
Как следует из названия функций, каждая из них проверяет является ли переданное в нее значение валидным.
Однако, существует несколько особенностей, которые стоит запомнить:
Функция isnumber(value) не анализирует единицы измерения.
Функция iscolor(value) поддерживает все принятые в CSS варианты записи цвета.
Отдельного внимания заслуживает функция isunit() , которая в отличие от других функций принимает на вход два параметра. Первый параметр — это значение, а второй — единицы измерения.
Синтаксис функции имеет следующий вид:
isunit(value, unit)
Эта функция работает следующим образом:
Получаем единицы измерения параметра value .
Сравниваем единицы измерения параметра value со значением параметра unit .
Если значения равны, то возвращается true , иначе false .
Работа с типами данных и единицами измерения |
104 |
Less. Путеводитель для новичков
Математические функции
Для удобства работы с числами доступны математические функции, которые представляют собой прослойку между
Less-функциями и встроенным объектом Math в JavaScript.
Кратко рассмотрим основные функции, которые могут пригодиться при работе с препроцессором при построении фреймворков и максимально унифицированных less-файлов.
Округление значений
При необходимости значения, получаемые после проведения математических операций, можно округлять,
используя стандартные методы ceil() , floor() и round() , представленные в Less в виде функций. Кроме того, Less предоставляет новую функцию percentage() .
Функция ceil() всегда округляет значения в большую сторону до целой части:
ceil(14.3) // 15
ceil(13.9) // 14
ceil(14.5) // 15
Функция floor() всегда округляет значения в меньшую сторону до целой части (отбрасывает дробную часть):
floor(14.3) // 14
floor(13.9) // 13
floor(14.5) // 14
Функция round() округляет значения в соответствии с правилами математики и заданным количеством знаков
после запятой:
round(14.3) // 14 round(13.9) // 14 round(14.5) // 15
// Знаки после запятой round(14.0714) // 14 round(14.0714, 1) // 14.1 round(14.0714, 2) // 14.07 round(14.0714, 3) // 14.071 round(14.0714, 4) // 14.074 round(14.0714, 7) // 14.074
Функция percentage() преобразует дробное значение в процентное:
percentage(0.25) // 25%
percentage(1 / 25) // 4%
Важно заметить, что дробная запись 1 / 25 сначала вычисляется как математическая операция, а уже потом передается в функцию. То есть, по сути своей, работает с числами с плавающей запятой.
Прочие функции
Математические функции |
105 |
Less. Путеводитель для новичков
Математические функции, представленные ниже, являются вторичными и применяются крайне редко. Дело в том,
что возможность применять Less для сложных вычислений предоставляется очень редко, ведь это всего-лишь надстройка над CSS.
Тригонометрические функции:
sin(value)
cosvalue)
tan(value)
Обратные тригонометрические функции:
asin(value)
acos(value)
atan(value)
Модуль числа, модуль между числами:
abs(value)
mod(valueOne, valueTwo)
Поиск минимального и максимального значения:
min(list) // min(1, 14, 19, 0.3) max(list) // max(1%, 10%, 4%, 8%)
Работа со степенями (квадратный корень и степень):
sqrt(value)
pow(value, power) // value в power степени
Математические константы:
pi()
Математические функции |
106 |