Перейти к содержанию

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

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

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

Работа с типами данных

Для определения типа данных в Less можно прибегнуть к помощи встроенных функций, которые возвращают логическое значение true или false.

Набор таких функций покрывает все типы, используемые в препроцессоре.

  • isnumber(value)
  • isstring(value)
  • iscolor(value)
  • iskeyword(value)
  • isurl(value)
  • ispixel(value)
  • isem(value)
  • ispercentage(value)
  • isruleset(value)

Как следует из названия функций, каждая из них проверяет является ли переданное в неё значение валидным. Однако, существует несколько особенностей, которые стоит запомнить:

  • Функция isnumber(value) не анализирует единицы измерения.
  • Функция iscolor(value) поддерживает все принятые в CSS варианты записи цвета.

Отдельного внимания заслуживает функция isunit(), которая в отличие от других функций принимает на вход два параметра. Первый параметр — это значение, а второй — единицы измерения.

Синтаксис функции имеет следующий вид:

isunit(value, unit)

Эта функция работает следующим образом:

  • Получаем единицы измерения параметра value.
  • Сравниваем единицы измерения параметра value со значением параметра unit.
  • Если значения равны, то возвращается true, иначе false.