Открыть оригинал markdown source для "logical-functions"

if

Возвращает одно из двух значений в зависимости от условия.

Параметры:

• condition: логическое выражение.
• value1: значение, которое возвращается, если condition истинно.
• value2: значение, которое возвращается, если condition ложно.

Добавлено: v3.0.0
Обновлено: v3.6.0

Примеры:

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}

Результат:

div {
    margin: 0;
    color:  black;
}

Примечание: в параметре condition поддерживаются те же логические выражения, что и в guard-условиях.

if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);

Примечание: до Less 3.6 условие обязательно нужно было заключать в скобки.

if(2 > 1, blue, green);   // ошибка в 3.0-3.5.3
if((2 > 1), blue, green); // работает в 3.6+

boolean

Вычисляет выражение и возвращает true или false.

Результат можно сохранить в переменную и затем использовать в guard-условиях или в if().

Параметры:

• condition: логическое выражение.

Добавлено: v3.0.0
Обновлено: v3.6.0

Примеры:

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg;
  color: if(@bg-light, black, white);
}

Результат:

div {
  background: black;
  color: white;
}

Открыть оригинал markdown source для "string-functions"

escape

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

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

Параметры: string - строка, которую нужно экранировать.

Возвращает: содержимое string без кавычек, уже в URL-encoded виде.

Пример:

escape('a=1')

Вывод:

a%3D1

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

e

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

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

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

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

Пример:

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

Вывод:

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

% format

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

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

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

Плейсхолдеры:

• d, D, a, A - принимают аргумент любого типа: цвет, число, escaped value, выражение и т.д. Если передать строку, будет использована вся строка целиком, вместе с кавычками.
• s, S - принимают любое выражение. Если передана строка, используется только её содержимое без кавычек.

Параметры:

• string: строка формата с плейсхолдерами.
• anything* : значения для подстановки.

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

Пример:

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

Параметры:

• string: строка, в которой выполняется поиск и замена.
• pattern: строка или шаблон регулярного выражения для поиска.
• replacement: строка, на которую нужно заменить найденное совпадение.
• flags: необязательные флаги регулярного выражения.

Возвращает: строку с выполненной заменой.

Пример:

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;

Открыть оригинал markdown source для "list-functions"

length

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

Параметры

• list - список значений, разделённых запятыми или пробелами.

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

Вывод: 3

Пример:

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

Вывод:

n: 4;

extract

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

Параметры

• list - список значений, разделённых запятыми или пробелами.
• index - целое число, задающее позицию элемента.

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

Вывод: dotted

Пример:

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

Вывод:

value: coconut;

range

Добавлено в v3.9.0

Создаёт список значений в заданном диапазоне.

Параметры

• start - необязательное начальное значение, например 1 или 1px.
• end - конечное значение, например 5px.
• step - необязательный шаг приращения.

Пример:

value: range(4);

Вывод:

value: 1 2 3 4;

Каждый элемент диапазона получает ту же единицу измерения, что и значение end. Например:

value: range(10px, 30px, 10);

Вывод:

value: 10px 20px 30px;

each

Добавлено в v3.7.0

Применяет ruleset к каждому элементу списка.

Параметры

• list - список значений, разделённых запятыми или пробелами.
• rules - анонимный ruleset или миксин.

Пример:

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

Вывод:

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

По умолчанию для каждого элемента доступны переменные @value, @key и @index. В большинстве обычных списков @key и @index совпадают: это числовая позиция элемента, начиная с 1. Но ruleset можно использовать и как структурированный список:

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

Результат:

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

Поскольку внутри каждого прохода можно вызывать миксины с guard-условиями, each() получается очень мощным инструментом.

Имена переменных в each()

Использовать именно @value, @key и @index не обязательно. Начиная с Less 3.7, each() поддерживает анонимные миксины - концепцию, которая затем может применяться и в других частях синтаксиса.

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

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Вызываем миксин и обходим каждое правило
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

Результат:

.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

each() возьмёт имена переменных, заданные в анонимном миксине, и по порядку свяжет их со значениями @value, @key и @index. Если написать только each(@list, #(@value) {}), то @key и @index определены не будут.

Цикл for через range и each

Требуется Less v3.9.0

Цикл for можно эмулировать, если сначала создать числовой список, а затем развернуть его через each() в ruleset.

Пример:

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});

Вывод:

.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

Открыть оригинал markdown source для "math-functions"

ceil

Округляет до следующего по величине целого числа.

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

Возврат: integer

Пример: ceil(2.4)

Вывод: 3

floor

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

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

Возврат: integer

Пример: floor(2.6)

Вывод: 2

percentage

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

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

Возврат: number

Пример: percentage(0.5)

Вывод: 50%

round

Применяет округление.

Параметры:

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

Возврат: number

Пример: round(1.67)

Вывод: 2

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

Вывод: 1.7

sqrt

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

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

Возврат: number

Пример:

sqrt(25cm)

Выход:

5cm

Пример:

sqrt(18.6%)

Выход:

4.312771730569565%;

abs

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

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

Возврат: number

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

Вывод: 25cm

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

Вывод: 18.6%;

sin

Вычисляет синусоидальную функцию.

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

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

Возврат: number

Пример:

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

Вычисляет функцию арксинуса (обратную синусу).

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

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

Возврат: number

Пример:

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

Выход:

-1rad
0rad
NaNrad

cos

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

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

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

Возврат: number

Пример:

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 до π.

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

Возврат: number

Пример:

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

Выход:

1rad
0rad
NaNrad

tan

Вычисляет функцию тангенса.

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

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

Возврат: number

Пример:

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.

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

Возврат: number

Пример:

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

Выход:

-1rad
0rad
1.525373rad;

pi

Возвращает π (пи);

Параметры: none

Возврат: number

Пример:

pi()

Выход:

3.141592653589793

pow

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

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

Параметры:

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

Возврат: number

Пример:

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

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

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

Параметры:

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

Возврат: number

Пример:

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%

Открыть оригинал markdown source для "type-functions"

isnumber

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

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: 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.

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: 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.

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: 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.

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: 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.

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: true, если значение имеет единицу px, иначе 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.

Параметры: value - значение или переменная, которые нужно проверить.

Возвращает: 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.

Параметры:

• value - значение или переменная, которые нужно проверить.
• unit - идентификатор единицы измерения, при желании в кавычках.

Возвращает: 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, если значение является ruleset, иначе false.

Параметры:

• value - переменная, которую нужно проверить.

Возвращает: true, если значение является ruleset, иначе 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

isdefined

Добавлено в v4.0.0

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

Параметры: variable - переменная, которую нужно проверить.

Пример:

@foo: 1;
isdefined(@foo);     // true
isdefined(@bar);     // false

Открыть оригинал markdown source для "misc-functions"

color

Преобразует строку с обозначением цвета в цветовое значение.

Параметры: string - строка с цветом.

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

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

Вывод: #aaa

image-size

Возвращает размеры изображения из файла.

Параметры: string - путь к файлу изображения.

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

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

Вывод: 10px 10px

Примечание: эта функция должна поддерживаться конкретной средой выполнения. Сейчас она доступна только в Node.js.

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

image-width

Возвращает ширину изображения из файла.

Параметры: string - путь к файлу изображения.

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

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

Вывод: 10px

Примечание: эта функция должна поддерживаться конкретной средой выполнения. Сейчас она доступна только в Node.js.

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

image-height

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

Параметры: string - путь к файлу изображения.

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

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

Вывод: 10px

Примечание: эта функция должна поддерживаться конкретной средой выполнения. Сейчас она доступна только в Node.js.

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

convert

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

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

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

Совместимые группы единиц:

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

Параметры:

• number: число с плавающей точкой и единицей измерения.
• identifier, string или escaped value: целевая единица.

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

Пример:

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

Вывод:

9000ms
140mm
8

data-uri

Встраивает ресурс в data:-URI и, при необходимости, откатывается к обычному url().

Откат к url() происходит, если включена опция ieCompat и ресурс слишком велик, либо если функция вызывается в браузере. Если MIME-тип не указан, Node.js определяет его автоматически через пакет mime.

Параметры:

• mimetype: необязательная строка с MIME-типом.
• url: путь к файлу, который нужно встроить.

Если mimetype не передан, data-uri() пытается определить его по расширению файла. Текстовые и SVG-файлы кодируются как UTF-8, всё остальное - как Base64.

Если MIME-тип задан явно и заканчивается на ;base64, будет использовано 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

Доступна только внутри guard-условий и возвращает 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() можно использовать вместе с guard-операторами. Например, .mixin() when not(default()) {} сработает только в том случае, если существует хотя бы ещё одно определение .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 {
  /* ... */
}

В одном guard-условии или в нескольких определениях миксина с одинаковым именем допустимо использовать несколько вызовов default():

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

  .m(1); // OK
}

Но если Less видит потенциальный конфликт между несколькими определениями, использующими 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 только внутри guard-выражений. Если вызвать её вне guard-условия миксина, она будет воспринята как обычное CSS-значение:

Пример:

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

Результат:

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

unit

Удаляет единицу измерения или заменяет её на другую.

Параметры:

• dimension: число с единицей измерения или без неё.
• unit: необязательная единица измерения; если не указана, единица будет удалена.

См. convert, если нужна замена единицы с пересчётом значения.

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

Вывод: 5px

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

Вывод: 5

get-unit

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

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

Параметры:

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

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

Вывод: px

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

Вывод: //nothing

svg-gradient

Генерирует SVG-градиенты с несколькими цветовыми остановками.

svg-gradient должен получить как минимум три аргумента. Первый задаёт тип и направление градиента, остальные - цвета и их позиции. Для первой и последней цветовой остановки позиция необязательна, для промежуточных - обязательна.

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

После направления должны идти как минимум две цветовые остановки. Их можно передать либо одним списком, либо отдельными аргументами.

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

• escaped value или list of identifiers: направление.
• list: список всех цветов и их позиций.

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

• escaped value или list of identifiers: направление.
• пара color [percentage]: первый цвет и его относительная позиция (позиция необязательна).
• пара color percent: необязательная вторая цветовая остановка.
• ...
• пара color percent: необязательная n-я цветовая остановка.
• пара color [percentage]: последний цвет и его относительная позиция (позиция необязательна).

Возвращает: url с SVG-градиентом, закодированным как URI.

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

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% ширины и заканчивается синим. Закодированная часть содержит такой SVG-градиент:

<?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>

Открыть оригинал markdown source для "color-definition"

rgb

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

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

Параметры:

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

Возврат: color

Пример: 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%.

Возврат: color

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

Вывод: rgba(90, 129, 32, 0.5)

argb

Создает шестнадцатеричное представление цвета в формате #AARRGGBB (НЕ #RRGGBBAA!).

Этот формат используется в Internet Explorer, а также при разработке .NET и Android.

Параметры: color, цвет объекта.

Возврат: string

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

Вывод: #805a1794

hsl

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

Параметры:

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

Возврат: color

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

Вывод: #80ff00

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

@new будет иметь оттенок @old, а также собственную насыщенность и яркость.

hsla

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

Параметры:

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

Возврат: color

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

Вывод: rgba(128, 255, 0, 0.5)

hsv

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

Обратите внимание, что это цветовое пространство доступно в Photoshop и отличается от hsl.

Параметры:

• hue: целое число от 0 до 360, обозначающее градусы.
• saturation: процент от 0 до 100 % или число от 0 до 1.
• value: процент от 0 до 100 % или число от 0 до 1.

Возврат: color

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

Вывод: #408000

hsva

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

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

Параметры:

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

Возврат: color

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

Вывод: rgba(64, 128, 0, 0.5)

Открыть оригинал markdown source для "color-channel"

hue

Возвращает канал оттенка цветового значения в пространстве HSL.

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

Возвращает: integer 0-360

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

Вывод: 90

saturation

Возвращает канал насыщенности цветового значения в пространстве HSL.

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

Возвращает: percentage 0-100

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

Вывод: 100%

lightness

Возвращает канал светлоты цветового значения в пространстве HSL.

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

Возвращает: percentage 0-100

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

Вывод: 50%

hsvhue

Возвращает канал оттенка цветового значения в пространстве HSV.

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

Возвращает: integer 0-360

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

Вывод: 90

hsvsaturation

Возвращает канал насыщенности цветового значения в пространстве HSV.

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

Возвращает: percentage 0-100

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

Вывод: 100%

hsvvalue

Возвращает канал значения цветового значения в пространстве HSV.

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

Возвращает: percentage 0-100

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

Вывод: 50%

red

Возвращает красный канал цветового значения.

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

Возвращает: float 0-255

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

Вывод: 10

green

Возвращает зелёный канал цветового значения.

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

Возвращает: float 0-255

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

Вывод: 20

blue

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

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

Возвращает: float 0-255

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

Вывод: 30

alpha

Возвращает альфа-канал цветового значения.

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

Возвращает: float 0-1

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

Вывод: 0.5

luma

Вычисляет luma - воспринимаемую яркость цвета.

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

До версии 1.7.0 яркость считалась без гамма-коррекции. Для старого способа вычисления используйте функцию luminance.

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

Возвращает: percentage 0-100%

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

Вывод: 44%

luminance

Вычисляет яркость без гамма-коррекции. До версии 1.7.0 эта функция называлась luma.

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

Возвращает: percentage 0-100%

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

Вывод: 65%

Открыть оригинал markdown source для "color-operations"

Операции с цветом обычно принимают параметры в тех же единицах измерения, что и изменяемые значения. Проценты по умолчанию трактуются как абсолютные, поэтому увеличение 10% на 10% даёт 20%. Если для параметра method указать relative, проценты будут относительными, и тогда увеличение 10% на 10% даст 11%. Все значения ограничиваются допустимым диапазоном и не "закольцовываются". Там, где приведён результат функции, мы дополнительно показываем форму записи, которая нагляднее объясняет изменение, а не только итоговый шестнадцатеричный цвет.

saturate

Увеличивает насыщенность цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: saturate(hsl(90, 80%, 50%), 20%)

Вывод: #80ff00 // hsl(90, 100%, 50%)

➜

desaturate

Уменьшает насыщенность цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: desaturate(hsl(90, 80%, 50%), 20%)

Вывод: #80cc33 // hsl(90, 60%, 50%)

➜

lighten

Увеличивает яркость цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: lighten(hsl(90, 80%, 50%), 20%)

Вывод: #b3f075 // hsl(90, 80%, 70%)

➜

darken

Уменьшает светлоту цвета в цветовом пространстве HSL на абсолютную величину.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: darken(hsl(90, 80%, 50%), 20%)

Вывод: #4d8a0f // hsl(90, 80%, 30%)

➜

fadein

Уменьшает прозрачность, то есть делает цвет более непрозрачным.

На полностью непрозрачные цвета не влияет. Для обратного эффекта используйте fadeout.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: fadein(hsla(90, 90%, 50%, 0.5), 10%)

Вывод: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

Увеличивает прозрачность, то есть делает цвет менее непрозрачным. Для обратного эффекта используйте fadein.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.
• method: Необязательно, установите значение relative, чтобы регулировка выполнялась относительно текущего значения.

Возврат: color

Пример: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Вывод: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

Установите абсолютную непрозрачность цвета. Может применяться к цветам независимо от того, имеют ли они значение непрозрачности или нет.

Параметры:

• color: Цветной объект.
• amount: процент 0–100%.

Возврат: color

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

Вывод: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

Поворачивает угол оттенка цвета в любую сторону.

Хотя диапазон углов формально лежит в пределах 0-360, функция использует операцию mod 360, поэтому можно передавать и большие, и отрицательные значения. Например, 360 и 720 дадут один и тот же результат. Учтите, что цвет проходит через преобразование RGB, а оно не сохраняет оттенок у серых цветов, потому что при нулевой насыщенности оттенок не имеет смысла. Поэтому лучше избегать такого кода:

@c: saturate(spin(#aaaaaa, 10), 10%);

Вместо этого лучше писать так:

@c: spin(saturate(#aaaaaa, 10%), 10);

Цвета всегда возвращаются как значения RGB, поэтому применение spin к значению серого ничего не даст.

Параметры:

• color: Цветной объект.
• angle: количество градусов для поворота (+ или -).

Возврат: color

Пример:

spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)

Выход:

#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)

➜

➜

mix

Смешайте два цвета в переменной пропорции. Непрозрачность включена в расчеты.

Параметры:

• color1: Цветной объект.
• color2: Цветной объект.
• weight: необязательно, точка процентного баланса между двумя цветами, по умолчанию равна 50%.

Возврат: color

Пример:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

Выход:

#800080
rgba(75, 25, 0, 0.75)

+ ➜

tint

Смешивает цвет с белым в заданной пропорции. Это то же самое, что вызвать mix(#ffffff, @color, @weight).

Параметры:

• color: Цветной объект.
• weight: необязательно, процентный баланс между цветом и белым, по умолчанию равен 50%.

Возврат: color

Пример:

no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%); 

Выход:

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

➜

shade

Смешивает цвет с чёрным в заданной пропорции. Это то же самое, что вызвать mix(#000000, @color, @weight).

Параметры:

• color: Цветной объект.
• weight: необязательно, процентный баланс между цветом и черным, по умолчанию равен 50%.

Возврат: color

Пример:

no-alpha: shade(#007fff, 50%); 
with-alpha: shade(rgba(00,0,255,0.5), 50%); 

Выход:

no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

➜

greyscale

Полностью убирает насыщенность цвета в пространстве HSL; то же самое, что desaturate(@color, 100%).

Поскольку оттенок не влияет на насыщенность, результирующая цветовая карта может быть несколько тусклой или мутной; luma может обеспечить лучший результат, поскольку он извлекает перцептивную, а не линейную яркость, например greyscale('#0000ff') вернет то же значение, что и greyscale('#00ff00'), хотя для человеческого глаза они кажутся совершенно разными по яркости.

Параметры: color: Цветной объект.

Возврат: color

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

Вывод: #808080 // hsl(90, 0%, 50%)

➜

Обратите внимание, что сгенерированный серый цвет выглядит темнее исходного зеленого, хотя его значение яркости такое же.

Сравните с использованием luma (использование отличается, поскольку luma возвращает одно значение, а не цвет):

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

Вывод: #cacaca

➜

На этот раз светлота серого выглядит примерно так же, как яркость зеленого, хотя на самом деле его значение выше.

contrast

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

Это полезно для обеспечения читаемости цвета на фоне, что также полезно для обеспечения доступности. Эта функция работает так же, как функция контрастности в Compass для SASS. В соответствии с WCAG 2.0 цвета сравниваются с использованием гамма-корректированного значения яркости, а не их яркости.

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

Параметры:

• color: Цветовой объект для сравнения.
• dark: необязательно — назначенный темный цвет (по умолчанию черный).
• light: необязательно — назначенный цвет света (по умолчанию белый).
• threshold: необязательно — процент от 0 до 100 %, определяющий место перехода от «темного» к «светлому» (по умолчанию 43 %, что соответствует SASS). Это используется для смещения контраста тем или иным образом, например, чтобы вы могли решить, будет ли 50%-ный серый фон приводить к черному или белому тексту. Обычно вы устанавливаете это значение ниже для «более светлых» палитр и выше для «более темных».

Возврат: color

Пример:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

Выход:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

В этих примерах используются рассчитанные выше цвета для фона и переднего плана; вы можете видеть, что вы никогда не получите ни белое на белом, ни черное на черном, хотя можно использовать порог, чтобы разрешить результаты с более низкой контрастностью, как в последнем примере:

Открыть оригинал markdown source для "color-blending"

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

multiply

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

Параметры:

• color1: Цветной объект.
• color2: Цветной объект.

Возврат: color

Примеры:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

Делайте противоположное multiply. В результате цвет становится более ярким.

Параметры:

• color1: Цветной объект.
• color2: Цветной объект.

Возврат: color

Пример:

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

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

Параметры:

• color1: объект базового цвета. Также определяющий цвет, позволяющий сделать результат светлее или темнее.
• color2: Цветной объект для наложения.

Возврат: color

Пример:

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

Аналогично overlay, но избегает использования чистого черного цвета, что приводит к чистому черному, и чистого белого, что приводит к чистому белому.

Параметры:

• color1: цветной объект для мягкого освещения другого.
• color2: Цветной объект, который необходимо мягко осветлить.

Возврат: color

Пример:

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

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

Параметры:

• color1: Цветной объект для наложения.
• color2: объект базового цвета. Также определяющий цвет, позволяющий сделать результат светлее или темнее.

Возврат: color

Пример:

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

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

Параметры:

• color1: Цветной объект, который будет действовать как уменьшаемый.
• color2: Цветной объект, который будет действовать как вычитаемое.

Возврат: color

Пример:

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

Эффект, аналогичный difference, но с меньшей контрастностью.

Параметры:

• color1: Цветной объект, который будет действовать как уменьшаемый.
• color2: Цветной объект, который будет действовать как вычитаемое.

Возврат: color

Пример:

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

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

Параметры:

• color1: Цветной объект.
• color2: Цветной объект.

Возврат: color

Пример:

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

Выполните эффект, противоположный difference.

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

Параметры:

• color1: Цветной объект, который будет действовать как уменьшаемый.
• color2: Цветной объект, который будет действовать как вычитаемое.

Возврат: color

Пример:

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);