"論理関数" のマークダウンソースを編集する

if

条件に応じて2つの値のいずれかを返します。

パラメータ

• condition: ブール式
• value1: condition が true の場合に返される値。
• value2: condition が true でない場合に返される値。

リリース：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;
}

注記：conditional パラメータとしてサポートされているブール式は、ガードステートメントと同じです。

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);   // Causes an error in 3.0-3.5.3
if((2 > 1), blue, green); // Ok 3.6+

boolean

true または false を評価します。

ガードまたは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;
}

"文字列関数" のマークダウンソースを編集する

escape

入力文字列にある特殊文字にURL エンコードを適用します。

• これらの文字はエンコードされません：,、/、?、@、&、+、'、~、!、および$。
• 最も一般的なエンコード文字は次のとおりです：\<space\>、#、^、(、)、{、}、|、:、>、<、;、]、[、および=。

パラメータ：string: エスケープする文字列。

戻り値：引用符なしのエスケープされたstring コンテンツ。

例

escape('a=1')

出力

a%3D1

注記：パラメータが文字列でない場合、出力は定義されません。現在の実装では、色に対してはundefinedを返し、その他の種類の引数に対しては変更されていない入力を返します。この動作に依存すべきではなく、将来変更される可能性があります。

e

文字列エスケープ。

パラメータとして文字列を期待し、その内容をそのまま返しますが、引用符は付けません。これは、有効なCSS構文ではないか、Lessが認識しない独自の構文を使用するCSS値を出力するために使用できます。

パラメータ：string - エスケープする文字列。

戻り値：string - エスケープされた文字列（引用符なし）。

例

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

出力

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

% format

関数%(string, arguments ...)は文字列を書式設定します。

最初の引数はプレースホルダー付きの文字列です。すべてのプレースホルダーはパーセント記号%と文字s、S、d、D、a、またはAで始まります。残りの引数には、プレースホルダーを置き換える式が含まれています。パーセント記号を出力する必要がある場合は、別のパーセント%%でエスケープします。

特殊文字をUTF-8エスケープコードにエスケープする必要がある場合は、大文字のプレースホルダーを使用します。この関数は、()'~!を除くすべての特殊文字をエスケープします。スペースは%20としてエンコードされます。小文字のプレースホルダーは、特殊文字をそのまま残します。

プレースホルダー

• d、D、a、A - 任意の種類の引数（色、数値、エスケープされた値、式など）で置き換えることができます。文字列と組み合わせて使用する場合、引用符を含む文字列全体が使用されます。ただし、引用符はそのまま文字列に配置され、"/"などでエスケープされません。
• s、S - 任意の式で置き換えることができます。文字列で使用する場合、文字列値のみが使用され、引用符は省略されます。

パラメータ

• string: プレースホルダーを含む書式文字列、
• anything* : プレースホルダーを置き換える値。

戻り値：書式設定されたstring。

例

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;

"リスト関数" のマークダウンソースを編集する

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

ルールセットの評価をリストの各メンバーにバインドします。

パラメータ

• list - カンマまたはスペースで区切られた値のリスト。
• rules - 匿名ルールセット/mixin

例

@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ベース）が割り当てられます。ただし、構造化されたリストとしてルールセット自体を使用することもできます。例えば

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

これは次のように出力されます。

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

もちろん、各ルールセット呼び出しに対してガード付きのmixinを呼び出すことができるため、each()は非常に強力な関数になります。

each()での変数名の設定

each()関数で@value、@key、および@indexを使用する必要はありません。Less 3.7では、each()関数を使用すると、匿名mixinの概念が導入されており、これは後で構文の他の部分に拡張される可能性があります。

匿名mixinは、通常のmixinと同様に.または#で始まる#()または.()の形式を使用します。each()では、次のように使用できます。

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

これは期待通りに出力されます。

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

each()関数は、匿名mixinで定義された変数名を取得し、その順序で@value、@key、@index値にバインドします。each(@list, #(@value) {})のみを記述する場合、@keyと@indexは定義されません。

rangeとeachを使ったforループの作成

Less v3.9.0以降が必要です。

数値リストを生成し、eachを使ってルールセットに展開することで、forループを簡単にエミュレートできます。

例

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

出力

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

"math-functions"のMarkdownソースを編集する

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

逆正弦関数（sinの逆関数）を計算します。

ラジアンで数値を返します（例：-π/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

逆余弦関数（cosの逆関数）を計算します。

ラジアンで数値を返します（例：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

逆正接関数（tanの逆関数）を計算します。

ラジアンで数値を返します（例：-π/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

π（パイ）を返します。

パラメータ: なし

戻り値: number

例

pi()

出力

3.141592653589793

pow

最初の引数を2番目の引数の累乗にした値を返します。

戻り値は最初の引数と同じ次元を持ち、2番目の引数の次元は無視されます。

パラメータ

• 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

最初の引数を2番目の引数で剰余演算した値を返します。

戻り値は最初の引数と同じ次元を持ち、2番目の引数の次元は無視されます。この関数は負の数と浮動小数点数にも対応できます。

パラメータ

• number: 浮動小数点数。
• number: 浮動小数点数。

戻り値: number

例

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

出力

NaNcm;
5cm
-1%;

min

1つ以上の値の中で最も低い値を返します。

パラメータ: value1, ..., valueN - 比較する1つ以上の値。

戻り値: 最も低い値。

例: min(5, 10);

出力: 5

例: min(3px, 42px, 1px, 16px);

出力: 1px

max

1つ以上の値の中で最も高い値を返します。

パラメータ: value1, ..., valueN - 比較する1つ以上の値。

戻り値: 最も高い値。

例: max(5, 10);

出力: 10

例: max(3%, 42%, 1%, 16%);

出力: 42%

"type-functions"のMarkdownソースを編集する

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

値がURLであればtrue、そうでなければfalseを返します。

パラメータ: value - 評価される値または変数。

戻り値: 値がURLであればtrue、そうでなければ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、そうでなければ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

値がem値であればtrue、そうでなければfalseを返します。

パラメータ: value - 評価される値または変数。

戻り値: 値がem値であればtrue、そうでなければ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、そうでなければfalseを返します。

パラメータ

• value - 評価される変数。

戻り値: 値がルールセットであれば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

isdefined

v4.0.0でリリース

変数が定義されていればtrue、そうでなければfalseを返します。

パラメータ: variable - 評価される変数。

例

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

"misc-functions"のMarkdownソースを編集する

color

色を解析します。そのため、色を表す文字列は色になります。

パラメータ: string: 指定された色の文字列。

戻り値: color

例: color("#aaa");

出力: #aaa

image-size

ファイルから画像の寸法を取得します。

パラメータ: string: 寸法を取得するファイル。

戻り値: dimension

例: image-size("file.png");

出力: 10px 10px

注記: この関数は各環境で実装する必要があります。現在、ノード環境でのみ使用可能です。

追加バージョン: v2.2.0

image-width

ファイルから画像の幅を取得します。

パラメータ: string: 寸法を取得するファイル。

戻り値: dimension

例: image-width("file.png");

出力: 10px

注記: この関数は各環境で実装する必要があります。現在、ノード環境でのみ使用可能です。

追加バージョン: v2.2.0

image-height

ファイルから画像の高さを取得します。

パラメータ: string: 寸法を取得するファイル。

戻り値: dimension

例: image-height("file.png");

出力: 10px

注記: この関数は各環境で実装する必要があります。現在、ノード環境でのみ使用可能です。

追加バージョン: v2.2.0

convert

単位を異なる単位に変換します。

最初の引数は単位付きの数値、2番目の引数は単位です。単位が互換性がある場合、数値は変換されます。互換性がない場合は、最初の引数は変更されずに返されます。

変換せずに単位を変更するには、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

リソースをインライン化し、ieCompatオプションがオンでリソースが大きすぎる場合、またはブラウザで関数を使用する場合、url()にフォールバックします。MIMEタイプが指定されていない場合、ノードはmimeパッケージを使用して正しいMIMEタイプを決定します。

パラメータ

• mimetype: （オプション）MIMEタイプ文字列。
• url: インライン化するファイルのURL。

mimetypeが指定されていない場合、data-uri関数はファイル名のサフィックスから推測します。テキストファイルとsvgファイルはutf-8でエンコードされ、それ以外はbase64でエンコードされます。

ユーザーがmimetypeを指定した場合、mimetype引数が`;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

ガード条件内でのみ使用可能で、他のミキシンが一致しない場合のみ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() when not(default()) {}は、.mixin()呼び出しに一致するミキシン定義が少なくとも1つ以上存在する場合にのみ一致しま す。

.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()呼び出しを行うことができます。

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組み込み関数として、*ガード式内でのみ*使用可能です。ミキシンのガード条件の外部で使用した場合、通常の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)

出力: //なし

svg-gradient

複数ストップのSVGグラデーションを生成します。

Svg-gradient関数は、複数ストップのSVGグラデーションを生成します。少なくとも3つのパラメータが必要です。最初のパラメータはグラデーションの種類と方向を指定し、残りのパラメータは色とその位置をリストします。最初と最後の色位置はオプションで、残りの色は位置を指定する必要があります。

方向は、to bottom、to right、to bottom right、to top right、ellipse、またはellipse at centerのいずれかである必要があります。方向は、エスケープ値~'to bottom'と単語で区切られたリストto bottomの両方で指定できます。

方向の後には、2つ以上のカラーストップが続く必要があります。それらはリスト内で供給することも、各カラーストップを個別の引数で指定することもできます。

パラメータ - リスト内のカラーストップ

• escaped valueまたはlist of identifiers: 方向
• list - リスト内のすべてのカラーとそれらの位置

パラメータ - 引数内のカラーストップ

• escaped valueまたはlist of identifiers: 方向
• color [percentage]ペア: 最初のカラーとその相対位置（位置はオプション）
• color percentペア: （オプション）2番目のカラーとその相対位置
• ...
• color percentペア: （オプション）n番目のカラーとその相対位置
• color [percentage]ペア: 最後のカラーとその相対位置（位置はオプション）

戻り値: "URIエンコード"されたSVGグラデーションを含むurl。

例 - リスト内のカラーストップ

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％に緑、最後に青で終わります。Base64エンコードされた部分には、次のsvg-gradientが含まれています。

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

"color-definition"のマークダウンソースを編集する

rgb

10進数の赤、緑、青（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

10進数の赤、緑、青、アルファ（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形式（NOT #RRGGBBAA！）の色を16進数で表します。

この形式は、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)

"color-channel"のマークダウンソースを編集する

hue

HSLカラー空間の色オブジェクトの色相チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 整数 0〜360

例: hue(hsl(90, 100%, 50%))

出力: 90

saturation

HSLカラー空間の色オブジェクトの彩度チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100

例: saturation(hsl(90, 100%, 50%))

出力: 100%

lightness

HSLカラー空間の色オブジェクトの明度チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100

例: lightness(hsl(90, 100%, 50%))

出力: 50%

hsvhue

HSVカラー空間の色オブジェクトの色相チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 整数 0〜360

例: hsvhue(hsv(90, 100%, 50%))

出力: 90

hsvsaturation

HSVカラー空間の色オブジェクトの彩度チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100

例: hsvsaturation(hsv(90, 100%, 50%))

出力: 100%

hsvvalue

HSVカラー空間の色オブジェクトの明度チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100

例: hsvvalue(hsv(90, 100%, 50%))

出力: 50%

red

色オブジェクトの赤チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 浮動小数点数 0〜255

例: red(rgb(10, 20, 30))

出力: 10

green

色オブジェクトの緑チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 浮動小数点数 0〜255

例: green(rgb(10, 20, 30))

出力: 20

blue

色オブジェクトの青チャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 浮動小数点数 0〜255

例: blue(rgb(10, 20, 30))

出力: 30

alpha

色オブジェクトのアルファチャネルを抽出します。

パラメーター: color - カラーオブジェクト。

戻り値: 浮動小数点数 0〜1

例: alpha(rgba(10, 20, 30, 0.5))

出力: 0.5

luma

色オブジェクトの輝度（知覚的明るさ）を計算します。

WCAG 2.0で推奨されているように、SMPTE C / Rec. 709係数を用いています。この計算は、コントラスト関数にも使用されています。

v1.7.0より前は、輝度はガンマ補正なしで計算されていました。「古い」値を計算するには、luminance関数を使用してください。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100%

例: luma(rgb(100, 200, 30))

出力: 44%

luminance

ガンマ補正なしで輝度の値を計算します（この関数はv1.7.0まではlumaという名前でした）。

パラメーター: color - カラーオブジェクト。

戻り値: パーセンテージ 0〜100%

例: luminance(rgb(100, 200, 30))

出力: 65%

"color-operations"のマークダウンソースを編集する

カラー演算は、一般的に変更する値と同じ単位でパラメーターを受け取り、パーセンテージは絶対値として扱われます。そのため、10％の値を10％増やすと20％になります。相対的なパーセンテージにするには、オプションのmethodパラメーターをrelativeに設定します。相対的なパーセンテージを使用する場合、10％の値を10％増やすと11％になります。値は許容範囲にクランプされ、ラップアラウンドしません。戻り値が表示されている場合、各関数が実行した内容を明確にする形式を使用しています。通常使用する16進数のバージョンに加えて。

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

2つの色を可変の比率で混ぜ合わせます。不透明度は計算に含まれます。

パラメータ

• color1: カラーオブジェクト。
• color2: カラーオブジェクト。
• weight: オプション。2つの色の間のパーセンテージのバランスポイント。デフォルトは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);

➜

シェード

黒色と色を可変の割合で混ぜ合わせる。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);

➜

グレースケール

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

➜

今回は、グレーの明度は緑と同じくらいに見えますが、実際には値の方が高くなっています。

コントラスト

2つの色のうち、別の色とのコントラストが最も大きい方を選択します。

これは、色が背景に対して読みやすいかどうかを確認するために役立ち、アクセシビリティへの準拠にも役立ちます。この関数は、SASSのCompassにおけるcontrast関数と同じように機能します。WCAG 2.0に従って、色は明度ではなく、ガンマ補正されたluma値を使用して比較されます。

明るいパラメータと暗いパラメータは、どちらの順序でも指定できます。関数はluma値を計算し、明るい色と暗い色を自動的に割り当てます。つまり、この関数を使用して、順序を逆にすることでコントラストが*最も低い*色を選択することはできません。

パラメータ

• 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
}

これらの例では、上記で計算された色を背景と前景に使用しています。白の上に白、黒の上に黒になることはありませんが、最後の例のように、しきい値を使用してコントラストの低い結果を許可することができます。

"color-blending"のマークダウンソースを編集する

これらの操作は、Photoshop、Fireworks、GIMPなどの画像エディタで見られるブレンドモードと似ていますが（必ずしも同一ではありません）、CSSの色を画像の色と一致させるために使用できます。

乗算

2つの色を乗算します。2つの色の対応する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);

スクリーン

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);

オーバーレイ

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);

ソフトライト

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);

ハードライト

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);

差

チャンネルごとに2番目の色を最初の色から減算します。負の値は反転されます。黒を減算しても変化はありません。白を減算すると色が反転します。

パラメータ

• 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);

除外

コントラストが低い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);

平均

チャンネルごと（RGB）に2つの色の平均を計算します。

パラメータ

• 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);

否定

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);