Less 常用函數(shù)整理

由于less官方?jīng)]有給出雜項(xiàng)函數(shù)的中文詳解，所以整理一下分享出來

color

解析顏色，將代表顏色的字符串轉(zhuǎn)換為顏色值.
參數(shù)：

  • string: 代表顏色值的字符串。
    返回值： color
    案例： color("#aaa");
    輸出： #aaa

convert

將數(shù)字從一種單位轉(zhuǎn)換到另一種單位。
第一個(gè)參數(shù)為帶單位的數(shù)值，第二個(gè)參數(shù)為單位。如果兩個(gè)參數(shù)的單位是兼容的，則數(shù)字的單位被轉(zhuǎn)換。如果兩個(gè)參數(shù)的單位不兼容，則原樣返回第一個(gè)參數(shù)。
兼容的單位是:

  • 長度： m, cm, mm, in, pt and pc,
  • 時(shí)間： s and ms,
  • 角度： rad, deg, grad and turn.
    參數(shù)：
  • number: 帶單位浮點(diǎn)數(shù)。
  • identifier, string or escaped value: units
    返回值： number
    案例：
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types

輸出：

9000ms
140mm
8

data-uri

將資源內(nèi)聯(lián)進(jìn)樣式表，如果開啟了 ieCompat 選項(xiàng)并且資源太大，或者此函數(shù)的運(yùn)行環(huán)境為瀏覽器，則會(huì)回退到直接使用 url() 。如果沒有指定 MIME，則 node 將使用 mime 包來決定正確的 mime 類型。
參數(shù)：

  • mimetype: (可選) MIME 字符串。
  • url: 需要內(nèi)嵌的文件的 URL 。
    案例： 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==');

unit

刪除或更換單位。
參數(shù)：

  • dimension: 帶單位或不帶單位的數(shù)字。
  • unit: (可選) 目標(biāo)單位，如果省略此參數(shù)，則刪除單位。
    案例： unit(5, px)
    輸出： 5px
    案例： unit(5em)
    輸出： 5

escape

對字符串中的特殊字符做 URL-encoding 編碼

  • 這些字符不會(huì)被編碼：,, /, ?, @, &, +, ', ~, ! and $。
  • 被編碼的字符是：\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。
    參數(shù)：string: 需要轉(zhuǎn)義的字符串。
    返回值：轉(zhuǎn)義后不帶引號(hào)的 string 字符串。
    案例：
escape('a=1')

輸出：

a%3D1

注意：如果參數(shù)不是字符串的話，函數(shù)行為是不可預(yù)知的。目前傳入顏色值的話會(huì)返回 undefined ，其它的值會(huì)原樣返回。寫代碼時(shí)不應(yīng)該依賴這個(gè)特性，而且這個(gè)特性在未來有可能改變。

e

用于對 CSS 的轉(zhuǎn)義，已經(jīng)由 ~"value" 語法代替。
它接受一個(gè)字符串作為參數(shù)，并原樣返回內(nèi)容，不含引號(hào)。它可用于輸出一些不合法的 CSS 語法，或者是使用 LESS 不能識(shí)別的屬性。
參數(shù)：string - 需要轉(zhuǎn)義的字符串。
返回值： string - 轉(zhuǎn)義后的字符串，不含引號(hào)
案例：

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

輸出：

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

注意：也接受經(jīng) ~"" 轉(zhuǎn)義的值或者是數(shù)字作為參數(shù)。任何其它的值將產(chǎn)生錯(cuò)誤。

% 格式化

此函數(shù) %(string, arguments ...) 用于格式化字符串。

第一個(gè)參數(shù)是一個(gè)包含占位符的字符串。占位符以百分號(hào) % 開頭，后面跟著字母 s、S、d、D、a 或 A。后續(xù)的參數(shù)用于替換這些占位符。如果你需要輸出百分號(hào)，可以多用一個(gè)百分號(hào)來轉(zhuǎn)義 %%。

使用大寫的占位符可以將特殊字符按照 UTF-8 編碼進(jìn)行轉(zhuǎn)義。 此函數(shù)將會(huì)對所有的特殊字符進(jìn)行轉(zhuǎn)義，除了 ()'~! ?？崭駮?huì)被轉(zhuǎn)義為 %20 。小寫的占位符將原樣輸出特殊字符，不進(jìn)行轉(zhuǎn)義。

占位符說明：

  • d, D, a, A - 以被任意類型的參數(shù)替換 (顏色、數(shù)字、轉(zhuǎn)義后的字符串、表達(dá)式等)。如果將它們和字符串一起使用，則整個(gè)字符串都會(huì)被使用，包括引號(hào)。然而，引號(hào)將會(huì)按原樣放在字符串中，不會(huì)用 "/" 或類似的方式轉(zhuǎn)義。
  • s, S - 可以被除了顏色的之外的任何類型參數(shù)替換。如果你將它們和字符串一起使用，則只有字符串的值會(huì)被使用，引號(hào)會(huì)被忽略。

參數(shù)：

  • 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

用一個(gè)字符串替換一段文本。

參數(shù)：

  • string: 用于搜索、替換操作的字符串。
  • pattern: 用于搜索匹配的字符串或正則表達(dá)式。
  • replacement: 用于替換匹配項(xiàng)的字符串。
  • flags: (可選) 正則表達(dá)式參數(shù)。

返回值： 被替換之后的字符串。

案例：

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;

列表函數(shù)

length

返回列表中元素的個(gè)數(shù)。

參數(shù)：

  • list - 由逗號(hào)或空格分隔的元素列表。

返回值：一個(gè)代表元素個(gè)數(shù)的數(shù)字。

案例： length(1px solid #0080ff);

輸出：3

案例：

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

輸出：

n: 4;

extract

返回列表中指定位置的元素。

參數(shù)：

  • list - 逗號(hào)或空格分隔的元素列表。
  • index - 指定列表中元素位置的數(shù)字。

返回值：列表中指定位置的元素。

案例： extract(8px dotted red, 2);

輸出： dotted

案例：

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

輸出：

value: coconut;

數(shù)學(xué)函數(shù)

ceil

向上取整。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 整數(shù)（integer）

案例： ceil(2.4)

輸出： 3

floor

向下取整。

參數(shù)： number - 浮點(diǎn)數(shù)

返回值： 整數(shù)（integer）

案例： floor(2.6)

輸出： 2

percentage

將浮點(diǎn)數(shù)轉(zhuǎn)換為百分比字符串。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 字符串（string）

案例： percentage(0.5)

輸出： 50%

round

四舍五入取整。

參數(shù)：

  • number: 浮點(diǎn)數(shù)
  • decimalPlaces: 可選：四舍五入取整的小數(shù)點(diǎn)位置。默認(rèn)值為0。

返回值： 數(shù)字（number）

案例： round(1.67)

輸出： 2

案例： round(1.67, 1)

輸出： 1.7

sqrt

計(jì)算一個(gè)數(shù)的平方根，并原樣保持單位。

參數(shù)： number - 浮點(diǎn)數(shù)

返回值： 數(shù)字（number）

案例：

sqrt(25cm)

輸出：

5cm

案例：

sqrt(18.6%)

輸出：

4.312771730569565%;

abs

計(jì)算數(shù)字的絕對值，并原樣保持單位。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（number）

Example #1: abs(25cm)

輸出： 25cm

Example #2: abs(-18.6%)

輸出： 18.6%;

sin

正弦函數(shù)。

處理時(shí)會(huì)將沒有單位的數(shù)字認(rèn)為是弧度值。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（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

反正弦函數(shù)。返回以弧度為單位的角度，區(qū)間在 -PI/2 到 PI/2之間。

返回以弧度為單位的角度，區(qū)間在 -π/2 和 π/2 之間。

參數(shù)： number - 取值范圍為 [-1, 1] 之間的浮點(diǎn)數(shù)。

返回值： 數(shù)字（number）

案例：

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

輸出：

-1rad
0rad
NaNrad

cos

余弦函數(shù)。

處理時(shí)會(huì)將沒有單位的數(shù)字認(rèn)為是弧度值。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（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

反余弦函數(shù)。，區(qū)間在 0 到 PI之間。

返回以弧度為單位的角度，區(qū)間在 0 到 π 之間。

參數(shù)： number - 取值范圍為 [-1, 1] 之間的浮點(diǎn)數(shù)。

返回值： 數(shù)字（number）

案例：

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

輸出：

1rad
0rad
NaNrad

tan

正切函數(shù)。

處理時(shí)會(huì)將沒有單位的數(shù)字認(rèn)為是弧度值。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（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

反正切函數(shù)。

返回以弧度為單位的角度，區(qū)間在 -π/2 到 π/2 之間。

參數(shù)： number - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（number）

案例：

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

輸出：

-1rad
0rad
1.525373rad;

pi

返回圓周率 π (pi);

參數(shù)： none

返回值： number

案例：

pi()

輸出：

3.141592653589793

pow

設(shè)第一個(gè)參數(shù)為A，第二個(gè)參數(shù)為B，返回A的B次方。

返回值與第一個(gè)參數(shù)有相同的單位，第二個(gè)參數(shù)的單位被忽略。

參數(shù)：

  • number: base -浮點(diǎn)數(shù)。
  • number: exponent - 浮點(diǎn)數(shù)。

返回值： 數(shù)字（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

返回第一個(gè)參數(shù)對第二參數(shù)取余的結(jié)果。

返回值與第一個(gè)參數(shù)單位相同，第二個(gè)參數(shù)單位被忽略。這個(gè)函數(shù)也可以處理負(fù)數(shù)和浮點(diǎn)數(shù)。

參數(shù)：

  • number: 浮點(diǎn)數(shù)。
  • number: 浮點(diǎn)數(shù)。

返回值： 數(shù)字（number）

案例：

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

輸出：

NaNcm;
5cm
-1%;

min

返回一系列值中最小的那個(gè)。

參數(shù)： value1, ..., valueN - 一個(gè)或多個(gè)參與比較的值。

返回值： 最小值。

案例： min(5, 10);

輸出： 5

案例： min(3px, 42px, 1px, 16px);

輸出： 1px

max

返回一系列值中最大的那個(gè)。

參數(shù)： value1, ..., valueN - 一個(gè)或多個(gè)參與比較的值。

返回值： 最大值。

案例： max(5, 10);

輸出： 10

案例： max(3%, 42%, 1%, 16%);

輸出： 42%

類型函數(shù)

isnumber

如果待驗(yàn)證的值為數(shù)字則返回 true ，否則返回 false 。

參數(shù)：value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為數(shù)字則返回 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

如果待驗(yàn)證的值是字符串則返回 true ，否則返回 false 。

參數(shù)：value - 待驗(yàn)證的值或變量。

返回值：如果是字符串則返回 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

如果待驗(yàn)證的值為顏色則返回 true ，否則返回 false 。

參數(shù)：value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為顏色則返回 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

如果待驗(yàn)證的值為關(guān)鍵字則返回 true ，否則返回 false 。

參數(shù)： value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為關(guān)鍵字則返回 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

如果待驗(yàn)證的值為 url 則返回 true ，否則返回 false 。

參數(shù)： value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為 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

如果待驗(yàn)證的值為像素?cái)?shù)則返回 true ，否則返回 false 。

參數(shù)： value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為像素?cái)?shù)則返回 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

如果待驗(yàn)證的值的單位是 em 則返回 true ，否則返回 false 。

參數(shù)： value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值的單位是 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

如果待驗(yàn)證的值為百分比則返回 true ，否則返回 false 。

參數(shù)： value - 待驗(yàn)證的值或變量。

返回值：如果待驗(yàn)證的值為百分比則返回 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

如果待驗(yàn)證的值為指定單位的數(shù)字則返回 true ，否則返回 false 。

參數(shù)：

  • value - 待驗(yàn)證的值或變量。
  • unit - 單位標(biāo)示符 (可加引號(hào)) 。

返回值：如果待驗(yàn)證的值為指定單位的數(shù)字則返回 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

顏色定義函數(shù)

rgb

通過十進(jìn)制紅色、綠色、藍(lán)色三種值 (RGB) 創(chuàng)建不透明的顏色對象。

在 HTML/CSS 中也會(huì)用文本顏色值 (literal color values) 定義顏色值，例如 #ff0000。

參數(shù)：

  • red: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。
  • green: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。
  • blue: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。

返回值： color

案例： rgb(90, 129, 32)

輸出： #5a8120

rgba

通過十進(jìn)制紅色、綠色、藍(lán)色，以及 alpha 四種值 (RGBA) 創(chuàng)建帶alpha透明的顏色對象。

參數(shù)：

  • red: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。
  • green: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。
  • blue: 0-255 的整數(shù)或 0-100% 的百分比數(shù)。
  • alpha: 0-1 的整數(shù)或 0-100% 的百分比數(shù)。

返回值： color

案例： rgba(90, 129, 32, 0.5)

輸出： rgba(90, 129, 32, 0.5)

argb

創(chuàng)建格式為 #AARRGGBB 的十六進(jìn)制顏色值 (注意不是 #RRGGBBAA！)。

這種格式被用于 IE 、.NET 和 Android 的開發(fā)中。

參數(shù)： color, 顏色對象。

返回值： string

案例： argb(rgba(90, 23, 148, 0.5));

輸出： #805a1794

hsl

通過色相 (hue)，飽和度 (saturation)，亮度 (lightness) 三種值 (HSL) 創(chuàng)建不透明的顏色對象。

參數(shù)：

  • hue: 0-360 的整數(shù)，用于表示度數(shù)。
  • saturation: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • lightness: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。

返回值： color

案例： hsl(90, 100%, 50%)

輸出： #80ff00

當(dāng)你想基于一種顏色的通道來創(chuàng)建另一種顏色時(shí)很方便，例如： @new: hsl(hue(@old), 45%, 90%); @new 將擁有 @old 的 hue，以及它自身的飽和度與亮度。

hsla

通過色相 (hue)，飽和度 (saturation)，亮度 (lightness)，以及 alpha 四種值 (HSLA) 創(chuàng)建透明的顏色對象。

參數(shù)：

  • hue: 0-360 的整數(shù)，用于表示度數(shù)。
  • saturation: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • lightness: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • alpha: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。

返回值： color

案例： hsl(90, 100%, 50%, 0.5)

輸出： rgba(128, 255, 0, 0.5)

hsv

通過色相 (hue)、飽和度 (saturation)、色調(diào) (value) 三種值 (HSV) 創(chuàng)建不透明的顏色對象。

注意，與 hsl 不同，這是另一種在 Photoshop 中可用的色彩空間。

參數(shù)：

  • hue: 0-360 的整數(shù)，用于表示度數(shù)。
  • saturation: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • value: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。

返回值： color

案例： hsv(90, 100%, 50%)

輸出： #408000

hsva

通過色相 (hue)，飽和度 (saturation)，色調(diào) (value)，以及 alpha 四種值 (HSVA) 創(chuàng)建透明的顏色對象。

注意，與 hsla 不同，這是另一種在 Photoshop 中可用的色彩空間。

參數(shù)：

  • hue: 0-360 的整數(shù)，用于表示度數(shù)。
  • saturation: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • value: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。
  • alpha: 0-100% 的百分比數(shù)或 0-1 的整數(shù)。

返回值： color

案例： hsva(90, 100%, 50%, 0.5)

輸出： rgba(64, 128, 0, 0.5)

顏色通道函數(shù)

hue

從顏色對象的 HSL 顏色空間中提取色色調(diào)值。

參數(shù)： color - 顏色對象。

返回值： 整數(shù)（integer） 0-360

案例： hue(hsl(90, 100%, 50%))

輸出： 90

saturation

從顏色對象的 HSL 色彩空間中提取飽和度值。

參數(shù)： color - 顏色對象。

返回值： 百分比（percentage） 0-100

案例： saturation(hsl(90, 100%, 50%))

輸出： 100%

lightness

從顏色對象的 HSL 色彩空間中提取亮度值。

參數(shù)： color - 顏色對象。

返回值： 百分比（percentage） 0-100

案例： lightness(hsl(90, 100%, 50%))

輸出： 50%

hsvhue

在顏色對象的 HSV 色彩空間中提取色相值。

參數(shù)： color - 顏色對象。

返回值： 整數(shù)（integer） 0-360

案例： hsvhue(hsv(90, 100%, 50%))

輸出： 90

hsvsaturation

在顏色對象的 HSV 色彩空間提取飽和度值。

參數(shù)： color - 顏色對象。

返回值： 百分比（percentage） 0-100

案例： hsvsaturation(hsv(90, 100%, 50%))

輸出： 100%

hsvvalue

Extracts the value channel of a color object in the HSV color space.

參數(shù)： color - 顏色對象。

返回值： 百分比（percentage） 0-100

案例： hsvvalue(hsv(90, 100%, 50%))

輸出： 50%

red

從顏色對象中提取紅色通道值。

參數(shù)： color - 顏色對象。

返回值： 整數(shù)（integer） 0-255

案例： red(rgb(10, 20, 30))

輸出： 10

green

從顏色對象中提取綠色通道值。

參數(shù)： color - 顏色對象。

返回值： 整數(shù)（integer） 0-255

案例： green(rgb(10, 20, 30))

輸出： 20

blue

從顏色對象中提取藍(lán)色通道值。

參數(shù)： color - 顏色對象。

返回值： 整數(shù)（integer） 0-255

案例： blue(rgb(10, 20, 30))

輸出： 30

alpha

從顏色對象中提取 alpha 通道值。

參數(shù)： color - 顏色對象。

返回值： 浮點(diǎn)數(shù)（float） 0-1

案例： alpha(rgba(10, 20, 30, 0.5))

輸出： 0.5

luma

計(jì)算顏色對象的 luma (perceptual brightness) 值（亮度的百分比表示法）。

Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.

參數(shù)： color - a顏色對象。

返回值： 百分比（percentage） 0-100%

案例： luma(rgb(100, 200, 30))

輸出： 65%

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行（line），也就是一...
    悟名先生閱讀 4,563評論 0贊 13
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,679評論 0贊 4
  • ＃本文參加“青春”大賽，本人保證本文為本人原創(chuàng)，如有問題則與主辦方無關(guān)，自愿放棄評優(yōu)評獎(jiǎng)資格# 宜春學(xué)院 王瑤 1...
    不打奧特曼的小怪獸閱讀 605評論 0贊 10
  • 我常去的那家小店。播放著我熟悉的音樂。忽然就想起從前。那個(gè)時(shí)候想要同你多呆一點(diǎn)。情愿耗費(fèi)一整天時(shí)間。 ...
    寧北閱讀 593評論 4贊 7
  • 在我們的成長過程中,會(huì)為自己增加各種裝備,滿足自己的各種需求。從基礎(chǔ)的衣食住行，如穿得體的衣服滿足視覺需求，吃美味...
    艾上花開閱讀 508評論 0贊 1

友情鏈接更多精彩內(nèi)容