Работа с типами данных и единицами измерения

Функции для работы с единицами измерений

При написании примесей может понадобиться проверять переданные параметры при вызове, используя условные конструкции. Для этого 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() не анализирует передаваемые ей данные, а просто возвращает число. Однако, если передать строку, то компилятор заподозрит что-то неладное и породит ошибку.

В случае с функцией get-unit() ситуация идентичная, исключая то, что при передаче строки ошибки не будет:

get-unit(10px)  // px
get-unit(10rem) // rem
get-unit(10cm)  // cm

// Такой единицы нет в CSS
get-unit(10apple) // apple

// Строка
get-unit("10string") // ""