Встроенные функции поддерживаемые Less.

color

Делает анализ(парсит) цвет, поэтому строка, представляющая цвет становится цветом.

Параметры: строка: строка, которая указывает цвет.

Возвращает: цвет

Пример: color("#aaa");

В результете выходит: #aaa

image-size

Получает размеры изображения из файла.

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

Возвращает: размер

Пример: image-size("file.png");

В результете выходит: 10px 10px

Примечание: эта функция должна быть реализована с помощью каждой среды. В настоящее время доступна только в среде узла.

Добавлена с версии: v2.2.0

image-width

Получает ширину изображения из файла.

Параметры: строка: файл, размеры каторого будут получаны.

Возвращает: размер

Пример: image-width("file.png");

В результете выходит: 10px

Примечание: эта функция должна быть реализована с помощью каждой среды. В настоящее время доступна только в среде узла.

Добавлена с версии: v2.2.0

image-height

Получает высоту изображения из файла.

Параметры: строка: файл, размеры каторого будут получаны.

Возвращает: размер

Пример: image-height("file.png");

В результете выходит: 10px

Примечание: эта функция должна быть реализована с помощью каждой среды. В настоящее время доступна только в среде узла.

Добавлена с версии: v2.2.0

convert

Преобразование числа из одной единицы измерения в другую.

Первый аргумент содержит число с единицами измерения, а второй аргумент только единицы измерения. Если единицы измерения совмесимы, число конвертируется. Если они не совместимы, первый аргумент возвращается неизмененным.

Также, можно воспользовать функцией unit для изменения чисел без преобразования.

Группы совместимых единиц измерения:

  • длина: m, cm, mm, in, pt и pc,
  • время: s и ms,
  • Угол наклона: rad, deg, grad и turn.

Параметры:

  • числа:число с плавающей запятой с единицами измерения.
  • идентификаторы, string or Экранированное значение: единицы измерения

Возвращает: число

Пример:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types

В результете выходит:

9000ms
140mm
8

data-uri

Внутристрочный ресурс, который возвращет url(). Если опция ieCompat включена и ресурс слишком большой, или если вы используете функцию в браузере. Если тип MIME-тип не задан, то узел использует mime package, чтобы определить правильный тип.

Параметры:

  • mime-тип: (Необязательный) Строка с MIME-типом.
  • url: URL файла.

Если mime-тип не указан, функция data-uri определяет его по суффикса имени. Текстовые и SVG-файлы кодируются в UTF-8 кодировке, все остальное кодируется в base64.

Tckb mime-тип указан, функция использует base64, если аргумент, гдк указывается mime-тип заканчивается ;base64. Например, image/jpeg;base64 кодируется в base64, а text/html кодируется в utf-8.

Пример: data-uri('../data/image.jpg');

В результете выходит: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

В браузере получаем: url('../data/image.jpg');

Пример: data-uri('image/jpeg;base64', '../data/image.jpg');

В результете выходит: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

Пример: data-uri('image/svg+xml;charset=UTF-8', 'image.svg');

В результете выходит: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

default

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

Пример:

.mixin(1)                   {x: 11}
.mixin(2)                   {y: 22}
.mixin(@x) when (default()) {z: @x}

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}

В результете выходит:

div {
  z: 3;
}
div.special {
  x: 11;
}

Можно использовать значение, возвращаемое по умолчания - default с защитными операторами. Например .mixin() когда нету (default()) {} будет соответствовать только, если есть по крайней мере еще одно определение, которое соответствует вызову Mixin.mixin():

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}

В результате выходит:

div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  /* ... */
}

Это позволило сделать множественные default() вызовы в том же состоянии охраны или в различных условиях Mixins с тем же именем:

div {
  .m(@x) when (default()), not(default())    {always: @x}
  .m(@x) when (default()) and not(default()) {never:  @x}

  .m(1); // OK
}

Однако Less выдаст ошибку, если она обнаруживает potential Конфликт между несколькими определениями примесей(миксин) с использованием default():

div {
  .m(@x) when (default())    {}
  .m(@x) when not(default()) {}

  .m(1); // Error
}

В приведенном выше примере невозможно определить, какое значение каждый вызванный default() должен возвращать, так как они рекурсивно зависят друг от друга.

Использование расширенного множественного вызова default():

.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}

В результате выходит:

.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}

Функция default доступна в качестве встроенной функции Less только внутри защитных выражений. Если используется вне, примесь(миксин) интерпретируется как обычное значение CSS:

Пример:

div {
  foo: default();
  bar: default(42);
}

В результате выходит:

div {
  foo: default();
  bar: default(42);
}

unit

Удаляет или изменяет единицы измерения.

Параметры:

  • Размерность: число, с или без единицей измерения
  • Единица измерения: (Необязательный)

Примечание: convert используется для изменения единиц измерения с преобразованием.

Пример: unit(5, px)

В результете выходит: 5px

Пример: unit(5em)

В результете выходит: 5

get-unit

Возвращает единицы измерения или число.

Если аргумент содержит число с единицами измерения, функция возвращает только единицы измерения. Если аргумент их не содержит, функция вернет пустое значение.

Параметры:

  • число: число с или без единицы измерения.

Пример: get-unit(5px)

В результете выходит: px

Пример: get-unit(5)

В результете выходит: //nothing(ничего)

svg-gradient

Генерирует SVG мульти градиент

Функция Svg-gradient создает мульти градиент SVG. При вызове, передается по крайней мере три параметра. Первый параметр определяет тип градиента и направление, оставшийся список параметров - цвета и их позиции. Определени первого и последнего цветов градиента не являются обязательным, остальные цвета должны иметь позиции.

Направление должно быть одно из to bottom, to right, to bottom right, to top right, ellipse или ellipse at center. Направление может быть определено для обоих значений ~'to bottom' и разделенный пробелами список слов to bottom.

Направление должно сопровождаться двумя или более цветов. Они могут поставляться либо в списке или вы можете указать каждый цвет остановки в отдельный аргумент.

Параметры - список цветов градиента:

  • значение или список индефикаторов: направление
  • список - все цвета и их позиции в списке

Параметры - список цветов градиента:

  • escaped value или список идентификаторов: направление
  • цвет [проценты] пара: Первый цвет и его относительное положение (Положение не является обязательным)
  • цвет в процентах пара: (необязательный) Второй цвет и его относительное положение
  • ...
  • цвет в процентах пара: (необязательный) n-ый цвет и его относительное положение
  • цвет [проценты] пара: последний цвет и его относительное положение (Положение не является обязательным)

Возвращает: url с svg градиентом.

Пример - список цветов градиента:

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

Эквивалент - цвета переданные в качестве аргументов:

div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}

Результат для обеих вариантов:

div {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}

Примечание: начиная с 2.2.0,в результате выходит base64 закодированная строка .

Сненерированное фоновое изображение имеет красный цвет слева, на 30% зеленый по ширине и заканчивается синим цветом:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="30%" stop-color="#008000"/>
        <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>

escape

Применяет URL-encoding для специальных символов, найденных в строке ввода.

  • Символы, котрые не кодируются: ,, /, ?, @, &, +, ', ~, ! и $.
  • Наиболее распространенные кодированные символы: \<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ и =.

Параметры: строка: a string to escape.

Возвращает: escaped строку без ковычек.

Пример:

escape('a=1')

В результете выходит:

a%3D1

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

e

CSS экранирование, используется синтаксис ~"значение" .

Ожидает строку, в качестве переданного парамметра и возвращает содержимое, как есть, но без ковычек.

Параметры: строка - строка для экранирования.

Возвращает: строка - экранированная строка без ковычек.

Пример:

filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");

В результете выходит:

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Примечание: Функция также принимает экранированные ~"" значения и числа в качестве параметров. Все остальное вернет ошибку.

% format

Функция для %(string, arguments ...) форматирования строки.

Первый аргумент - это строка с меткой. Все метки начинаются с символа % за которым следуют символы s,S,d,D,a, или A. Оставшиеся аргументы содержат вырожения для замены меток. Если Вам нужно написать символ процентов, экранируете его, как %%.

Используйте прописные метки, если вам нужно экранировать специальные символы в их UTF-8 кодировке. Функция экранирует все специальные символы, кроме ()'~!. Пробел кодируется как %20. Метки в нижнем регистре оставляют символы как они есть.

Метки:

  • d, D, a, A - может быть заменен любым типом аргументов (цвет, число, экранированное значение, выражение, ...). Если Вы используете их со строкой, вся строка будет использована, включая кавычки. Тем не менее, кавычки помещаются в строку, как они есть, они не экранируются при помощи "/" или ничем подобным.
  • s, S - могут быть заменены любым выражением. Если Вы используете его со строкой, используйте только значение строки, кавычки пропускаются.

Параметры:

  • строка: форматирует строку с метками,
  • выражение* : значения, которые будут подставлены вместо меток.

Возвращает: отформатированную строку.

Пример:

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

В результете выходит:

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

replace

Заменяет текст внутри строки.

Добавлена с версии v1.7.0

Параметры:

  • строка: Строка для поиска и замены.
  • шаблон: Строка или регулярное выражение для поиска.
  • замена: Строка для замены совпадающего выражения.
  • флаги: (Необязательно) флаги регулярного выражения.

Возвращает: строка с замененными значениями.

Пример:

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

В результате выходит:

"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

length

Возвращает количество элементов в списке значений.

Параметры: список - список значений разделенный запятой или пробелом.

Возвращает: число элементов в писке.

Пример: length(1px solid #0080ff);

В результете выходит: 3

Пример:

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

В результете выходит:

n: 4;

extract

Возвращает значение определенной позиции в списке.

Параметры: список - список значений разделенный запятой или пробелом. index - целое число, указывающее позицию элемента списка, который возвращается. Возвращает: значение указанной позиции в списке.

Пример: extract(8px dotted red, 2);

В результете выходит: dotted

Пример:

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

В результете выходит:

value: coconut;

ceil

Округляет до ближайшего большего целого числа.

Параметры: число - число с плавающей точкой.

Возвращает: целое число

Пример: ceil(2.4)

В результете выходит: 3

floor

Округляет до ближайшего меньшего целого числа.

Параметры: число - число с плавающей точкой.

Возвращает: целое число

Пример: floor(2.6)

В результете выходит: 2

percentage

Преобразует число с плавающей точкой в число с процентами(строка) .

Параметры: число - число с плавающей точкой.

Возвращает: строка

Пример: percentage(0.5)

В результете выходит: 50%

round

Округляет число.

Параметры:

  • число: число с плавающей точкой.
  • число знаков после запятой: Необязательный: Число знаков до округления. По умолчанию 0.

Возвращает: число

Пример: round(1.67)

В результете выходит: 2

Пример: round(1.67, 1)

В результете выходит: 1.7

sqrt

Вычисляет квадратный корень числа. Сохраняет единицы измерения, как они есть.

Параметры: число - число с плавающей точкой.

Возвращает: число

Пример:

sqrt(25cm)

В результете выходит:

5cm

Пример:

sqrt(18.6%)

В результете выходит:

4.312771730569565%;

abs

Вычисляет абсолютное значение числа. Сохраняет единицы измерения, как они есть.

Параметры: число - число с плавающей точкой.

Возвращает: число

Пример #1: abs(25cm)

В результете выходит: 25cm

Пример #2: abs(-18.6%)

В результете выходит: 18.6%;

sin

Вычисляет синус.

Предполагает радианы без единиц измерения.

Параметры: число - число с плавающей точкой.

Возвращает: число

Пример:

sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian

В результете выходит:

0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian

asin

Функция вычисляет arcsine (обратная синусу) .

Возвращает число в радианах, например: число между -П/2 и П/2.

Параметры: число - число с плавающей точкой от [-1, 1] интервала.

Возвращает: число

Пример:

asin(-0.8414709848078965)
asin(0)
asin(2)

В результете выходит:

-1rad
0rad
NaNrad

cos

Функция вычисления косинуса.

Предполагает число радиан без единиц измерения.

Параметры: число - число с плавающей точкой.

Возвращает: число

Пример:

cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian

В результете выходит:

0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian

acos

Функция вычисления арккосинуса (обратная косинусу).

Возвращает число радиан, например: число между 0 и П.

Параметры: число - число с плавающей точкой от [-1, 1] интервала.

Возвращает: число

Пример:

acos(0.5403023058681398)
acos(1)
acos(2)

В результете выходит:

1rad
0rad
NaNrad

tan

Функция вычисления тангенса.

Предполагает число радиан без единиц измерения.

Параметры: число - число с плавающей точкой.

Возвращает: число

Пример:

tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian

В результете выходит:

1.5574077246549023   // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian

atan

Функция вычисления арктангенса (обратная тангенсу).

Возвращает число в радианах, например: число между -ПЂ/2 и ПЂ/2.

Параметры: число - a floating point number.

Возвращает: число

Пример:

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places

В результете выходит:

-1rad
0rad
1.525373rad;

pi

Возвращает ПЂ (pi);

Параметры: none

Возвращает: число

Пример:

pi()

В результете выходит:

3.141592653589793

pow

Возвращает значения первого аргумента, возведенное в степень второго аргумента.

Возвращаемое значение имеет ту же размерность, что и у первого параметра, размерности второго параметра игнорируется.

Параметры:

  • число: основное - число с плавающей точкой.
  • число: показатель степени - число с плавающей точкой.

Возвращает: число

Пример:

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)

В результете выходит:

1cm
0.0016
5
NaN
NaN%

mod

Возвращает значение первого аргумента по модулю второго.

Возвращаемое значение имеет ту же размерность, что и у первого параметра, размерности второго параметра игнорируется. Функция поддерживает работы с отрицательными числами и числами с палающей точкой.

Параметры:

  • число: число с плавающей точкой.
  • число: число с плавающей точкой.

Возвращает: число

Пример:

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);

В результете выходит:

NaNcm;
5cm
-1%;

min

Возращает наименьшее число из одного или списка значений.

Параметры: value1, ..., valueN - одно или несколько значений для сравнения.

Возвращает: наименьшее значение.

Пример: min(5, 10);

В результете выходит: 5

Пример: min(3px, 42px, 1px, 16px);

В результете выходит: 1px

max

Возращает наибольшее число из одного или списка значений.

Параметры: value1, ..., valueN - одно или несколько значений для сравнения.

Возвращает: наибольшее значение.

Пример: max(5, 10);

В результете выходит: 10

Пример: max(3%, 42%, 1%, 16%);

В результете выходит: 42%


isnumber

Возвращает true Если значение число, false если нет.

Параметры: значение - значение или переменные, не пустое.

Возвращает: true Если значение число, false если нет.

Пример:

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

isstring

Возвращает true Если значение является строкой, false если нет.

Параметры: значение - значение или переменные, не пустое.

Возвращает: true Если значение является строкой, false если нет.

Пример:

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

iscolor

Возвращает true Если значение является цветом, false если нет.

Параметры: значение - значение или переменная, не пустое.

Возвращает: true Если значение является цветом, false если нет.

Пример:

iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

iskeyword

Возвращает true Если значение является ключем, false если нет.

Параметры: значение - значение или переменная.

Возвращает: true Если значение является ключем, false если нет.

Пример:

iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false

isurl

Возвращает true Если значение является url, false если нет.

Параметры: value - значение или переменная.

Возвращает: true Если значение является url, false если нет.

Пример:

isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true

ispixel

Возвращает true Если значение является числом пикселей, false если нет.

Параметры: значение - значение или переменная.

Возвращает: true Если значение является числом пикселей, false если нет.

Пример:

ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false

isem

Возвращает true Если значение является em значением, false если нет.

Параметры: значение - значение или переменная.

Возвращает: true Если значение является em значением, false если нет.

Пример:

isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false

ispercentage

Возвращает true Если значение является числом с процентами, false если нет.

Параметры: value - значение или переменная

Возвращает: true Если значение является числом с процентами,, false если нет.

Пример:

ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false

isunit

Возвращает true Если значение является числом в определенной еденице измерения, false если нет.

Параметры:

  • значение - значение или переменная.
  • единица измерения - идентификатор единицы измерения (необязательно, берется в ковычки) для проверки.

Возвращает: true Если значение является числом в определенной еденице измерения, false если нет.

Пример:

isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false

isruleset

Возвращает true Если значение является набором правил, false если нет.

Параметры:

  • значение - значение или переменная.

Возвращает: true Если значение является набором правил, false если нет.

Пример:

@rules: {
    color: red;
}

isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false
isruleset(1234);     // false
isruleset(56px);     // false
isruleset(7.8%);     // false
isruleset(keyword);  // false
isruleset(url(...)); // false

rgb

Создает непрозрачный объект цвета при помощи RGB(красный, зеленый и голубой) значений.

Буквенные значения цвета в стандартном HTML/CSS формата также могут быть использованы для определения цвета, например #ff0000.

Параметры:

  • red: Целое число от 0-255 или проценты 0-100%.
  • green: Целое число от 0-255 или проценты 0-100%.
  • blue: Целое число от 0-255 или проценты 0-100%.

Возвращает: цвет в hex формате

Пример: rgb(90, 129, 32)

В результете выходит: #5a8120

rgba

Создает прозрачный объект цвета при помощи RGBA(красный, зеленый и голубой, прозрачность) значений.

Параметры:

  • red: Целое число от 0-255 или проценты 0-100%.
  • green: Целое число от 0-255 или проценты 0-100%.
  • blue: Целое число от 0-255 или проценты 0-100%.
  • alpha: Число 0-1 или проценты 0-100%.

Возвращает: цвет

Пример: rgba(90, 129, 32, 0.5)

В результете выходит: rgba(90, 129, 32, 0.5)

argb

Создает цвет в формате hex #AARRGGBB (не #RRGGBBAA!).

Данный формат применяется в Internet Explorer, .NET, а также Android разработке.

Параметры: цвет

Возвращает: строку

Пример: argb(rgba(90, 23, 148, 0.5));

В результете выходит: #805a1794

hsl

Создает непрозрачный объект цвета при помощи hue (HSL).

Параметры:

  • hue: Целое число 0-360, определяющее угол.
  • saturation: Проценты 0-100% или число 0-1.
  • lightness: Проценты 0-100% или число 0-1.

Возвращает: цвет

Пример: hsl(90, 100%, 50%)

В результете выходит: #80ff00

Это полезно, если вы хотите создать новый цвет на основе другого канала цвета, например: @new: hsl(hue(@old), 45%, 90%);

@new будет @old hue, и обладет собственной насыщенностью и светлотой.

hsla

Создает прозрачный объект цвета при помощи hue, передает насыщение, светлость и прозрачнсоть (HSLA).

Параметры:

  • hue: Целое число 0-360, определяющее угол.
  • saturation: Проценты 0-100% или число 0-1.
  • lightness: Проценты 0-100% или число 0-1.
  • alpha: Проценты 0-100% или число 0-1.

Возвращает: цвет

Пример: hsl(90, 100%, 50%, 0.5)

В результете выходит: rgba(128, 255, 0, 0.5)

hsv

Создает непрозрачный объект цвета при помощи hue, насыщенность и значение (HSV).

Примечание: это цветовое пространство доступно в Photoshop, и это не то же самое, что и hsl.

Параметры:

  • hue: Целое число 0-360, определяющее угол.
  • насыщенность: Проценты 0-100% или число 0-1.
  • значение: Проценты 0-100% или число 0-1.

Возвращает: цвет

Пример: hsv(90, 100%, 50%)

В результете выходит: #408000

hsva

Создает прозрачный объект цвета при помощи hue, насыщенность, значение и прозрачность (HSVA).

Примечание: не то же самое, что и hsla,и цветовое пространство доступно в Photoshop.

Параметры:

  • hue: Целое число 0-360, определяющее угол.
  • saturation: Проценты 0-100% или число 0-1.
  • value: Проценты 0-100% или число 0-1.
  • alpha: Проценты 0-100% или число 0-1.

Возвращает: цвет

Пример: hsva(90, 100%, 50%, 0.5)

В результете выходит: rgba(64, 128, 0, 0.5)


hue

Извлекает цветовой канал цвета в HSL палитре.

Параметры: цвет.

Возвращает: целое число 0-360

Пример: hue(hsl(90, 100%, 50%))

В результете выходит: 90

saturation

Извлекает насыщенность цвета в HSL палитре.

Параметры: цвет.

Возвращает: проценты 0-100

Пример: saturation(hsl(90, 100%, 50%))

В результете выходит: 100%

lightness

Извлекает яркость цвета в HSL палитре.

Параметры: цвет.

Возвращает: проценты 0-100

Пример: lightness(hsl(90, 100%, 50%))

В результете выходит: 50%

hsvhue

Извлекает оттенок в HSV палитре.

Параметры: цвет

Возвращает: целое число 0-360

Пример: hsvhue(hsv(90, 100%, 50%))

В результете выходит: 90

hsvsaturation

Извлекает насыщение цвета в HSV палитре.

Параметры: цвет.

Возвращает: проценты 0-100

Пример: hsvsaturation(hsv(90, 100%, 50%))

В результете выходит: 100%

hsvvalue

Извлекает значение канала цвета в HSV палитре.

Параметры: цвет.

Возвращает: проценты 0-100

Пример: hsvvalue(hsv(90, 100%, 50%))

В результете выходит: 50%

red

Извлекает красный канал цвета(R).

Параметры: цвет.

Возвращает: число 0-255

Пример: red(rgb(10, 20, 30))

В результете выходит: 10

green

Извлекает зеленый канал цвета(G).

Параметры: цвет.

Возвращает: число 0-255

Пример: green(rgb(10, 20, 30))

В результете выходит: 20

blue

Извлекает голубой канал цвета(B).

Параметры: цвет.

Возвращает: число 0-255

Пример: blue(rgb(10, 20, 30))

В результете выходит: 30

alpha

Извлекает прозрачность цвета.

Параметры: цвет.

Возвращает: число 0-1

Пример: alpha(rgba(10, 20, 30, 0.5))

В результете выходит: 0.5

luma

Вычисляет яркость цвета.

Используйте SMPTE C / Rec. 709 коэффициент , как советуют в WCAG 2.0. Такое вычисление, также используется в функции контраста.

Перед выходом версии Less v1.7.0, luma рассчитывалась без гамма-коррекции. Используйте функцию luminance, чтобы вычислить "старые" значения.

Параметры: цвет

Возвращает: проценты 0-100%

Пример: luma(rgb(100, 200, 30))

В результете выходит: 44%

luminance

Вычисляет значение luma без гамма-коррекции (Эта функция была названа luma до версии v1.7.0)

Параметры: цвет

Возвращает: проценты 0-100%

Пример: luminance(rgb(100, 200, 30))

В результете выходит: 65%


В less, эти операции Подобны (хотя и не всегда должны быть одинаковыми) режимам смешиваения в графических редакторах, таких как Photoshop, Fireworks или GIMP, так Вы можете использовать их, для того, чтобы Ваши CSS цвета соответствовали Вашему изображению.

multiply

Умножвает два цвета. Соответствующие RGB каналы от каждого из двух цветов перемножаются, затем деляться на 255. The В результате выходит более темный цвет.

Параметры:

  • цвет1: Объект цвета.
  • цвет2: Объект цвета.

Возвращает: цвет

Примеры::

multiply(#ff6600, #000000);

ff6600 000000 000000

multiply(#ff6600, #333333);

ff6600 333333 331400

multiply(#ff6600, #666666);

ff6600 666666 662900

multiply(#ff6600, #999999);

ff6600 999999 993d00

multiply(#ff6600, #cccccc);

ff6600 cccccc cc5200

multiply(#ff6600, #ffffff);

ff6600 ffffff ff6600

multiply(#ff6600, #ff0000);

ff6600 ff0000 ff0000

multiply(#ff6600, #00ff00);

ff6600 00ff00 006600

multiply(#ff6600, #0000ff);

ff6600 0000ff 000000

screen

Работает противоположно multiply. В результате выходит более светлый цвет.

Параметры:

  • цвет1: Объект цвета.
  • цвет2: Объект цвета.

Возвращает: цвет

Примеры:

screen(#ff6600, #000000);

ff6600 000000 ff6600

screen(#ff6600, #333333);

ff6600 333333 ff8533

screen(#ff6600, #666666);

ff6600 666666 ffa366

screen(#ff6600, #999999);

ff6600 999999 ffc299

screen(#ff6600, #cccccc);

ff6600 cccccc ffe0cc

screen(#ff6600, #ffffff);

ff6600 ffffff ffffff

screen(#ff6600, #ff0000);

ff6600 ff0000 ff6600

screen(#ff6600, #00ff00);

ff6600 00ff00 ffff00

screen(#ff6600, #0000ff);

ff6600 0000ff ff66ff

overlay

Комбинирует эффект с обеих multiply и screen функций. Условно делает светлый каналы светлее, а темный каналы темнее. Примечание: Результаты условий определяются первым параметром цвета.

Параметры:

  • цвет1: Основной цвет. Также определяет цвет CSS, чобы сделать в результате цвет светлее или темнее.
  • цвет2: Цвет для наложения.

Возвращает: цвет

Примеры:

overlay(#ff6600, #000000);

ff6600 000000 ff0000

overlay(#ff6600, #333333);

ff6600 333333 ff2900

overlay(#ff6600, #666666);

ff6600 666666 ff5200

overlay(#ff6600, #999999);

ff6600 999999 ff7a00

overlay(#ff6600, #cccccc);

ff6600 cccccc ffa300

overlay(#ff6600, #ffffff);

ff6600 ffffff ffcc00

overlay(#ff6600, #ff0000);

ff6600 ff0000 ff0000

overlay(#ff6600, #00ff00);

ff6600 00ff00 ffcc00

overlay(#ff6600, #0000ff);

ff6600 0000ff ff0000

softlight

Подобна overlay но не рабтает с чисто черным цветом. В результате выходит чисто черный, и при чисто белом, в результате будет чисто белый.

Параметры:

  • цвет1: цвет для мягкого цвета другого.
  • цвет2: цвет, кторый будет мягко осветлен.

Возвращает: цвет

Примеры:

softlight(#ff6600, #000000);

ff6600 000000 ff2900

softlight(#ff6600, #333333);

ff6600 333333 ff4100

softlight(#ff6600, #666666);

ff6600 666666 ff5a00

softlight(#ff6600, #999999);

ff6600 999999 ff7200

softlight(#ff6600, #cccccc);

ff6600 cccccc ff8a00

softlight(#ff6600, #ffffff);

ff6600 ffffff ffa100

softlight(#ff6600, #ff0000);

ff6600 ff0000 ff2900

softlight(#ff6600, #00ff00);

ff6600 00ff00 ffa100

softlight(#ff6600, #0000ff);

ff6600 0000ff ff2900

hardlight

Такая же, как overlay но с обратными цветовыми ролями в параметрах.

Параметры:

  • цвет1: Цвет для наложения.
  • цвет2: Основной цвет. Также определяет цвет CSS, чобы сделать в результате цвет светлее или темнее.

Возвращает: цвет

Примеры:

hardlight(#ff6600, #000000);

ff6600 000000 000000

hardlight(#ff6600, #333333);

ff6600 333333 662900

hardlight(#ff6600, #666666);

ff6600 666666 cc5200

hardlight(#ff6600, #999999);

ff6600 999999 ff8533

hardlight(#ff6600, #cccccc);

ff6600 cccccc ff2900

hardlight(#ff6600, #ffffff);

ff6600 ffffff ffffff

hardlight(#ff6600, #ff0000);

ff6600 ff0000 ff0000

hardlight(#ff6600, #00ff00);

ff6600 00ff00 00ff00

hardlight(#ff6600, #0000ff);

ff6600 0000ff 0000ff

difference

Вычитает второй цвет от первого цвета на основе поканально. Отрицательные значения инвертируются. Вычитает черные результаты в каких-либо изменениях; вычитает белые результаты в инверсии цвета..

Параметры:

  • цвет1: Цвет, который выступает в качестве уменьшаемого.
  • цвет2: Цвет, чтобы выступает в качестве вычитаемого.

Возвращает: цвет

Примеры:

difference(#ff6600, #000000);

ff6600 000000 ff6600

difference(#ff6600, #333333);

ff6600 333333 cc3333

difference(#ff6600, #666666);

ff6600 666666 990066

difference(#ff6600, #999999);

ff6600 999999 663399

difference(#ff6600, #cccccc);

ff6600 cccccc 3366cc

difference(#ff6600, #ffffff);

ff6600 ffffff 0099ff

difference(#ff6600, #ff0000);

ff6600 ff0000 006600

difference(#ff6600, #00ff00);

ff6600 00ff00 ff9900

difference(#ff6600, #0000ff);

ff6600 0000ff ff66ff

exclusion

Эффект подобен функции difference с более низким контрастом.

Параметры:

  • цвет1: Цвет, который выступает в качестве уменьшаемого.
  • цвет2: Цвет, чтобы выступает в качестве вычитаемого.

Возвращает: цвет

Примеры:

exclusion(#ff6600, #000000);

ff6600 000000 ff6600

exclusion(#ff6600, #333333);

ff6600 333333 cc7033

exclusion(#ff6600, #666666);

ff6600 666666 997a66

exclusion(#ff6600, #999999);

ff6600 999999 668599

exclusion(#ff6600, #cccccc);

ff6600 cccccc 338fcc

exclusion(#ff6600, #ffffff);

ff6600 ffffff 0099ff

exclusion(#ff6600, #ff0000);

ff6600 ff0000 006600

exclusion(#ff6600, #00ff00);

ff6600 00ff00 ff9900

exclusion(#ff6600, #0000ff);

ff6600 0000ff ff66ff

average

Вычисляют среднее значение двух цветов на основе каждого канала(RGB).

Параметры:

  • цвет1: цвет.
  • цвет2: цвет.

Возвращает: цвет

Примеры:

average(#ff6600, #000000);

ff6600 000000 803300

average(#ff6600, #333333);

ff6600 333333 994d1a

average(#ff6600, #666666);

ff6600 666666 b36633

average(#ff6600, #999999);

ff6600 999999 cc804d

average(#ff6600, #cccccc);

ff6600 cccccc e69966

average(#ff6600, #ffffff);

ff6600 ffffff ffb380

average(#ff6600, #ff0000);

ff6600 ff0000 ff3300

average(#ff6600, #00ff00);

ff6600 00ff00 80b300

average(#ff6600, #0000ff);

ff6600 0000ff 803380

negation

Обратный эффект difference.

В результате получается более яркий цвет. Примечание: Противоположный эффект не означает - обратный(инвертируемый), как результат операции сложения.

Параметры:

  • цвет1: Цвет, который выступает в качестве уменьшаемого.
  • цвет2: Цвет, чтобы выступает в качестве вычитаемого.

Возвращает: цвет

Примеры:

negation(#ff6600, #000000);

ff6600 000000 ff6600

negation(#ff6600, #333333);

ff6600 333333 cc9933

negation(#ff6600, #666666);

ff6600 666666 99cc66

negation(#ff6600, #999999);

ff6600 999999 66ff99

negation(#ff6600, #cccccc);

ff6600 cccccc 33cccc

negation(#ff6600, #ffffff);

ff6600 ffffff 0099ff

negation(#ff6600, #ff0000);

ff6600 ff0000 006600

negation(#ff6600, #00ff00);

ff6600 00ff00 ff9900

negation(#ff6600, #0000ff);

ff6600 0000ff ff66ff