天天看點
傳回

【LESS系列】内置函數說明

本文轉自 http://www.cnblogs.com/zfc2201/p/3493335.html

escape(@string); // 通過 URL-encoding 編碼字元串

e(@string); // 對字元串轉義，與

~"value"

類似。

%(@string, values...); // 格式化字元串

unit(@dimension, [@unit: ""]); // 移除或替換屬性值的機關

color(@string); // 将字元串解析為顔色值

data-uri([mimetype,] url); // * 将資源内嵌到css中，可能回退到url()

ceil(@number); // 向上取整

floor(@number); // 向下取整

percentage(@number); // 将數字轉換為百分比，例如 0.5 -> 50%

round(number, [places: 0]); // 四舍五入取整

sqrt(number); // * 計算數字的平方根

abs(number); // * 數字的絕對值

sin(number); // * sin函數

asin(number); // * arcsin函數

cos(number); // * cos函數

acos(number); // * arccos函數

tan(number); // * tan函數

atan(number); // * arctan函數

pi(); // * 傳回PI

pow(@base, @exponent); // * 傳回@base的@exponent次方

mod(number, number); // * 第一個參數對第二個參數取餘

convert(number, units); // * 在數字之間轉換

unit(number, units); // * 不轉換的情況下替換數字的機關

color(string); // 将字元串或者轉義後的值轉換成顔色

rgb(@r, @g, @b); // 轉換為顔色值

rgba(@r, @g, @b, @a); // 轉換為顔色值

argb(@color); // 建立 #AARRGGBB 格式的顔色值

hsl(@hue, @saturation, @lightness); // 建立顔色值

hsla(@hue, @saturation, @lightness, @alpha); // 建立顔色值

hsv(@hue, @saturation, @value); // 建立顔色值

hsva(@hue, @saturation, @value, @alpha); // 建立顔色值

hue(@color); // 從顔色值中提取 hue 值（色相）

saturation(@color); // 從顔色值中提取 saturation 值（飽和度）

lightness(@color); // 從顔色值中提取 'lightness' 值（亮度）

hsvhue(@color); // * 從顔色中提取 hue 值，以HSV色彩空間表示（色相）

hsvsaturation(@color); // * 從顔色中提取 saturation 值，以HSV色彩空間表示（飽和度）

hsvvalue(@color); // * 從顔色中提取 value 值，以HSV色彩空間表示（色調）

red(@color); // 從顔色值中提取 'red' 值（紅色）

green(@color); // 從顔色值中提取 'green' 值（綠色）

blue(@color); // 從顔色值中提取 'blue' 值（藍色）

alpha(@color); // 從顔色值中提取 'alpha' 值（透明度）

luma(@color); // 從顔色值中提取 'luma' 值（亮度的百分比表示法）

saturate(@color, 10%); // 飽和度增加 10%

desaturate(@color, 10%); // 飽和度降低 10%

lighten(@color, 10%); // 亮度增加 10%

darken(@color, 10%); // 亮度降低 10%

fadein(@color, 10%); // 透明度增加 10%

fadeout(@color, 10%); // 透明度降低 10%

fade(@color, 50%); // 設定透明度為 50%

spin(@color, 10); // 色相值增加 10

mix(@color1, @color2, [@weight: 50%]); // 混合兩種顔色

greyscale(@color); // 完全移除飽和度，輸出灰色

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 輸出 @darkcolor，否則輸出 @lightcolor

multiply(@color1, @color2);

screen(@color1, @color2);

overlay(@color1, @color2);

softlight(@color1, @color2);

hardlight(@color1, @color2);

difference(@color1, @color2);

exclusion(@color1, @color2);

average(@color1, @color2);

negation(@color1, @color2);

iscolor(@colorOrAnything); // 判斷一個值是否是顔色

isnumber(@numberOrAnything); // 判斷一個值是否是數字（可含機關）

isstring(@stringOrAnything); // 判斷一個值是否是字元串

iskeyword(@keywordOrAnything); // 判斷一個值是否是關鍵字

isurl(@urlOrAnything); // 判斷一個值是否是url

ispixel(@pixelOrAnything); // 判斷一個值是否是以px為機關的數值

ispercentage(@percentageOrAnything); // 判斷一個值是否是百分數

isem(@emOrAnything); // 判斷一個值是否是以em為機關的數值

isunit(@numberOrAnything, "rem"); // * 判斷一個值是否是指定機關的數值

函數解析

字元串函數 (String functions)

escape

使用URL-encoding的方式編碼字元串。

以下字元不會被編碼：

,

 / 

/

?

@

&

+

'

~

!

$

。

最常見的被編碼的字元串包括：

#

^

(

)

{

}

|

:

>

<

;

]

[

=

參數：字元串，需要編碼的字元串

傳回值：字元串 (string)

例如：

  • escape('a=1')

輸出：

  • a%3D1
注意：如果參數不是字元串的話，函數行為是不可預知的。目前傳入顔色值的話會傳回

undefined

 ，其它的值會原樣傳回。寫代碼時不應該依賴這個特性，而且這個特性在未來有可能改變。

e

用于對CSS的轉義，與

~"value"

類似。它接受一個字元串作為參數，并原樣傳回内容（不含引号）。它可用于輸出一些不合法的CSS文法，或者是使用LESS不能識别的屬性。

參數：字元串，需要轉義的字元串

傳回值：字元串的内容，不含引号

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

  • filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意：也接受經

~""

 轉義的值或者是數字作為參數。其它的值将産生錯誤。

%

%("format", arguments ...)

将會格式化字元串。第一個參數是一個包含占位符的字元串。占位符以百分号

%

開頭，後面接字母

s

S

d

D

a

A

。後續的參數用于替換這些占位符。如果你需要輸出百分号，可以多用一個百分号來轉義

%%

使用大寫的占位符可以将特殊字元按照UTF-8進行轉義，函數将會對所有的特殊字元進行轉義，除了

(

)

'

 /

~

!

。空格會被轉義為

%20

。小寫的占位符将原樣保持特殊字元，不進行轉義。

占位符說明：

d

D

a

A

 可以被任意類型的參數替換（顔色、數字、轉義的字元串、表達式等）。如果将它們和字元串一起使用，則整個字元串都會被使用，包含引号。

但是，引号将會原樣放在字元串中，不會被轉義。

s

S

 可以被除了顔色的之外的任何類型參數替換。如果你将它們和字元串一起使用，則隻有字元串的值會被使用，引号會被忽略。

參數：【1】字元串，帶有占位符的格式化字元串 【2】任意值，用于替換占位符的值

傳回值：格式化後的字元串

  • 使用

    a

     /

    d

     格式化：

    %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
  • 使用大寫的

    a

    d

    %('repetitions: %A file: %D', 1 + 2, "directory/file.less");

  • s

    %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
  • 使用大寫

    s

    %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

分别輸出如下：

  • a

    d

    "repetitions: 3 file: "directory/file.less"";

  • a

    d

    "repetitions: 3 file: %22directory%2Ffile.less%22";

  • s

    "repetitions: 3 file: directory/file.less";

  • s

    "repetitions: 3 file: directory%2Ffile.less";

綜合類函數 (Misc functions)

color

解析顔色，将代表顔色的字元串轉換為顔色值，參數必須是16進制表示的顔色或者縮寫寫法。

參數：字元串，代表顔色值的字元串

  • color("#445566")

  • color(~"#123")

  • #445566

  • #112233

unit

移除或替換屬性值 (dimension) 的機關。

參數：【1】@dimension: 數字，帶或不帶機關 【2】@unit: 可選，将要替換成的機關，如果省略則移除原機關

  • unit(5, px)

  • 5px

  • unit(5em)

  • 5

data-uri

将一個資源使用BASE64編碼嵌入到樣式檔案，如果開啟了

ieCompat

選項，而且資源檔案的體積過大或者是在浏覽器中使用，則會使用

url()

進行回退。如果沒有指定MIME，則Node.js會使用MIME包來決定正确的MIME。

參數：【1】mimetype: MIME字元串，可選參數 【2】url: 需要内嵌的檔案的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==');

算數函數 (Math functions)

ceil

向上取整。

參數：數字，浮點數

傳回值：向上取整後的整數

  • ceil(2.4)

  • 3

floor

向下取整。

傳回值：向下取整後的整數

  • floor(2.6)

  • 2

percentage

将浮點數轉換為百分比字元串。

傳回值：字元串

  • percentage(0.5)

  • 50%

round

四舍五入取整。

參數：【1】數字：浮點數 【2】小數位數，數字，可選，四舍五入取整的小數點位置，預設值為0。

傳回值：數字 (number)

  • round(1.67)

  • 2

  • round(1.67, 1)

  • 1.7

sqrt

計算一個數的平方根，原樣保持機關。

傳回值：數字，平方根

  • sqrt(25cm)

  • 5cm

  • sqrt(18.6%)

  • 4.312771730569565%;

abs

計算數字的絕對值，原樣保持機關。

傳回值：數字，絕對值

  • abs(25cm)

  • 25cm

  • abs(-18.6%)

  • 18.6%

sin

正弦函數，處理時會将沒有機關的數字認為是弧度值。

參數：【1】數字，浮點數，角度

傳回值：數字，角度對應的正弦值

  • sin(1); // 1弧度角的正弦值

  • sin(1deg); // 1角度角的正弦值

  • sin(1grad); // 1百分度角的正弦值

分别輸出：

  • 0.8414709848078965;

  • 0.01745240643728351;

  • 0.015707317311820675;
百分度是将一個圓周分為400份，每份為一個百分度，英文gradian，簡寫grad。見http://zh.wikipedia.org/zh/%E7%99%BE%E5%88%86%E5%BA%A6。

asin

反正弦函數，傳回以弧度為機關的角度，區間在 -PI/2 到 PI/2之間。

參數：數字，浮點數，代表正弦值，範圍為 [-1,1]

傳回值：數字，角度

  • asin(-0.8414709848078965)

  • asin(0)

  • asin(2)

  • -1rad

  • 0rad

  • NaNrad
有關反三角函數的知識可以參見http://zh.wikipedia.org/zh/%E5%8F%8D%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0，下同。

cos

餘弦函數，處理時會将沒有機關的數字認為是弧度值。

參數：數字，浮點數，角度

傳回值：數字，角度對應的餘弦值

  • cos(1); // 1弧度角的餘弦值

  • cos(1deg); // 1角度角的餘弦值

  • cos(1grad); // 1百分度角的餘弦值

  • 0.5403023058681398

  • 0.9998476951563913

  • 0.9998766324816606

acos

反餘弦函數，傳回以弧度為機關的角度，區間在 0 到 PI之間。

參數：數字，浮點數，代表餘弦值，範圍為 [-1,1]

  • acos(0.5403023058681398)

  • acos(1) 

  • acos(2)

  • 1rad

  • 0rad

  • NaNrad

tan

正切函數，處理時會将沒有機關的數字認為是弧度值。

傳回值：數字，角度對應的正切值

  • sin(1); // 1弧度角的正切值

  • sin(1deg); // 1角度角的正切值

  • sin(1grad); // 1百分度角的正切值

  • 1.5574077246549023

  • 0.017455064928217585

  • 0.015709255323664916

atan

反正切函數，傳回以弧度為機關的角度，區間在 -PI/2 到 PI/2之間。

參數：數字，浮點數，代表正切值

  • atan(-1.5574077246549023)

  • atan(0)

  • round(atan(22), 6) // 四舍五入輸出6位小數

  • -1rad

  • 0rad

  • 1.525373rad;

pi

傳回圓周率PI。

參數：無

傳回值：數字，圓周率

  • pi()

  • 3.141592653589793

pow

假設第一個參數為A，第二個參數為B，傳回A的B次方。傳回值與A有相同的機關，B的機關被忽略。

參數：【1】數字，浮點數，基數 【2】數字，浮點數，冪指數

傳回值：數字，基數的冪指數次方

  • 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

傳回第一個參數對第二參數取餘的結果。傳回值與第一個參數機關相同，第二個參數機關被忽略。這個函數也可以處理負數和浮點數。

參數：【1】數字，浮點數 【2】數字，浮點數

傳回值：數字，取餘的結果

  • mod(0cm, 0px)

  • mod(11cm, 6px);

  • mod(-26%, -5);

  • NaNcm;

  • 5cm

  • -1%;

convert

将數字從一種類型轉換到另一種類型。第一個參數為帶機關的數值，第二個參數為機關。如果兩個參數的機關是相容的，則數字的機關被轉換。如果兩個參數的機關不相容，則原樣傳回第一個參數。

相容的機關組：

  • 長度：

    m

    cm

    mm

    in

    pt

    pc
  • 時間：

    s

    ms
  • 角度：

    rad

    deg

    grad

    turn
grad為“百分度”，見正弦函數下的說明。turn為“圈/周”的意思，1turn為360度。

參數：【1】數字，帶機關的數值，浮點數 【2】機關

傳回值：轉換機關後的數值

  • convert(9s, "ms")

  • convert(14cm, mm)

  • convert(8, mm) // 不相容的機關

  • 9000ms

  • 140mm

  • 8

傳回帶不同機關的數值。隻有機關被改變，數值本身不會被轉換。函數會假設第二個參數帶上了合法機關。

參數：【1】數字，帶機關的浮點數 【2】機關

傳回值：帶機關的數值

  • unit(9s, ~"ms")

  • unit(-9, m)

  • 9ms

  • -9m

顔色函數 (Color functions)

rgb

通過十進制紅色，綠色，藍色三種值 (RGB) 建立不透明的顔色對象。在 HTML/CSS 中也會用文本顔色值 (literal color values) 定義顔色，例如 

red -> #ff0000

參數：【1】@red，整數 0-255 或百分比 0-100% 【2】@green，整數 0-255 或百分比 0-100% 【3】@blue，整數 0-255 或百分比 0-100%

傳回值：顔色 (color)

  • rgb(90, 129, 32)

  • #5a8120

rgba

通過十進制紅色，綠色，藍色，以及 alpha 四種值 (RGBA) 建立帶alpha透明的顔色對象。

參數：【1】@red，整數 0-255 或百分比 0-100% 【2】@green，整數 0-255 或百分比 0-100% 【3】@blue: 整數 0-255 或百分比 0-100% 【4】@alpha: 數字 0-1 或百分比 0-100%

  • rgba(90, 129, 32, 0.5)

  • rgba(90, 129, 32, 0.5)

argb

建立格式為 #AARRGGBB 的十六進制 (hex representation) 顔色 (注意不是 #RRGGBBAA ！)。這種格式被用在IE濾鏡中，以及.NET和Android開發中。

參數：@color，顔色對象 (A color object.)

  • argb(rgba(90, 23, 148, 0.5));

  • #805a1794

hsl

通過色相 (hue)，飽和度 (saturation)，亮度 (lightness) 三種值 (HSL) 建立不透明的顔色對象。

參數：【1】@hue: 整數 0-360 表示度數 【2】@saturation: 百分比 0-100% 或數字 0-1 【3】@lightness: 百分比 0-100% 或數字 0-1

  • hsl(90, 100%, 50%)

  • #80ff00

當你想使用一種顔色來建立另一種顔色時很友善，如：

@new: hsl(hue(@old), 45%, 90%);

@new 将使用 @old 的 色相值，以及它自己的飽和度與亮度。

hsla

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

參數：【1】@hue: 整數 0-360 表示度數 【2】@saturation: 百分比 0-100% 或數字 0-1 【3】@lightness: 百分比 0-100% 或數字 0-1 【4】@alpha: 百分比 0-100% 或數字 0-1

  • hsl(90, 100%, 50%, 0.5)

  • rgba(128, 255, 0, 0.5)

hsv

通過色相 (hue)，飽和度 (saturation)，色調 (value) 三種值 (HSV) 建立不透明的顔色對象。注意與 HSL 不同，這是另一種在Photoshop中可用的色彩空間。

參數：【1】@hue: 整數 0-360 表示度數 【2】@saturation: 百分比 0-100% 或數字 0-1 【3】@value: 百分比 0-100% 或數字 0-1

  • hsv(90, 100%, 50%)

  • #408000

hsva

通過色相 (hue)，飽和度 (saturation)，色調 (value)，以及 alpha 四種值 (HSVA) 建立透明的顔色對象。注意與 HSLA 不同，這是另一種在Photoshop中可用的色彩空間。

參數：【1】@hue: 整數 0-360 表示度數 【2】@saturation: 百分比 0-100% 或數字 0-1 【3】@value: 百分比 0-100% 或數字 0-1 【4】@alpha: 百分比 0-100% 或數字 0-1

  • hsva(90, 100%, 50%, 0.5)

  • rgba(64, 128, 0, 0.5)

hue

從顔色對象中提取色相值。

傳回值：整數，範圍從0-360

  • hue(hsl(90, 100%, 50%))

  • 90

saturation

從顔色對象中提取飽和度值。

傳回值：百分比值 0-100

  • saturation(hsl(90, 100%, 50%))

  • 100%

lightness

從顔色對象中提取亮度值。

  • lightness(hsl(90, 100%, 50%))

  • 50%

hsvhue

以HSV色彩空間提取顔色中的色相值。

參數：顔色

傳回：整數，範圍為0-360

  • hsvhue(hsv(90, 100%, 50%))

  • 90

hsvsaturation

以HSV色彩空間提取顔色中的飽和度值。

傳回值：百分比，範圍0-100

  • hsvsaturation(hsv(90, 100%, 50%))

  • 100%

hsvvalue

以HSV色彩空間提取顔色中的色調值。

傳回：百分比，範圍為0-100

  • hsvvalue(hsv(90, 100%, 50%))

  • 50%

red

從顔色對象中提取紅色值。

傳回值：整數 0-255

  • red(rgb(10, 20, 30))

  • 10

green

從顔色對象中提取綠色值。

  • green(rgb(10, 20, 30))

  • 20

blue

從顔色對象中提取藍色值。

  • blue(rgb(10, 20, 30))
  • 30

alpha

從顔色對象中提取 alpha 值。

傳回值：浮點數，介于 0-1 之間

  • alpha(rgba(10, 20, 30, 0.5))

  • 0.5

luma

計算顔色對象的 luma 值（亮度的百分比表示法）。使用在WCAG2.0中定義的SMPTE C / Rec. 709 coefficients。 這個計算公式也用在 

contrast()

 函數中。

傳回值：百分比 0-100%

  • luma(rgb(100, 200, 30))

  • 65%

顔色運算 (Color operations)

顔色值運算有幾點注意事項：參數必須機關/格式相同；百分比将作為絕對值處理，比如 10% 增加 10%，結果是 20% 而不是 11%；參數值隻能在限定的範圍内；they do not wrap around (這一句不清楚意思，可能是指參數值不會在超過範圍後自動從另一側“穿越”回去。)。傳回值時，除了十六進制的顔色值 (hex versions) 外将對其他格式做簡化處理。

saturate

增加一定數值的顔色飽和度。

參數：【1】@color，顔色對象 (A color object.) 【2】@amount，百分比 0-100%

  • saturate(hsl(90, 90%, 50%), 10%)
  • #80ff00 // hsl(90, 100%, 50%)

desaturate

降低一定數值的顔色飽和度。

  • desaturate(hsl(90, 90%, 50%), 10%)

  • #80e51a // hsl(90, 80%, 50%)

lighten

增加一定數值的顔色亮度。

  • lighten(hsl(90, 90%, 50%), 10%)

  • #99f53d // hsl(90, 90%, 60%)

darken

降低一定數值的顔色亮度。

  • darken(hsl(90, 90%, 50%), 10%)

  • #66c20a // hsl(90, 90%, 40%)

fadein

降低顔色的透明度（或增加不透明度），令其更不透明，對不透明的顔色無效。如果要增加顔色的透明度，使用 

fadeout()

 函數。

  • fadein(hsla(90, 90%, 50%, 0.5), 10%)

  • rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

增加顔色的透明度（或降低不透明度），令其更透明，對不透明的顔色無效。如果要增加顔色的透明度，使用 fadein() 函數。

  • fadeout(hsla(90, 90%, 50%, 0.5), 10%)

  • rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)

fade

給顔色（包括不透明的顔色）設定一定數值的透明度。

  • fade(hsl(90, 90%, 50%), 10%)

  • rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

向任意方向旋轉顔色的色相角度 (hue angle)，旋轉範圍 0-360，超過一周後将從起點開始繼續旋轉（+ - 控制方向），比如旋轉 360 度與 720 度是相同的結果。

需要注意的是，顔色值會通過 RGB 格式轉換，這個過程不能保留灰色的色相值（灰色沒有飽和度，色相值也就沒有意義了），是以要确定使用函數的方法能夠保留顔色的色相值，例如不要這樣使用函數：

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

而應該用這種方法代替：

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

因為顔色值永遠輸出為 RGB 格式，是以 

spin()

 函數對灰色無效。

參數：【1】@color，顔色對象 (A color object.) 【2】@angle，任意數字表示角度 （+ 或 – 表示方向）

  • spin(hsl(10, 90%, 50%), 20)

  • spin(hsl(10, 90%, 50%), -20)

  • #f27f0d // hsl(30, 90%, 50%)

  • #f20d33 // hsl(350, 90%, 50%)

mix

根據比例混合兩種顔色，包括計算不透明度。

參數：【1】@color1，顔色對象 (A color object.) 【2】@color2，顔色對象 (A color object.) 【3】@weight，可選項，平衡兩種顔色的百分比，預設 50%。

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

greyscale

完全移除顔色的飽和度，與 

desaturate(@color, 100%)

 函數效果相同。

因為顔色的飽和度不受色相值影響，是以輸出的顔色會稍顯暗淡 (dull or muddy)；

如果使用

luma

值可能會有更好的結果，因為它提取的是百分比亮度，而不是線性亮度。

比如

greyscale('#0000ff')

與

greyscale('#00ff00')

會得出相同的結果，盡管對人眼來說，它們的亮度是不一樣的。

  • greyscale(hsl(90, 90%, 50%))

  • #808080 // hsl(90, 0%, 50%)

contrast

這個函數對比 @background 的 luma 值與 @threshold 參數的大小，如果大于輸出 @darkcolor, 小于則輸出 @lightcolor，便于選擇相對于背景更容易閱讀的顔色，同時提高了使用顔色的靈活性，與 Compass 的

contrast()

 函數 工作方式相同。根據 WCAG 2.0 應該對比顔色的 luma 值，而不是亮度值 (lightness)。

參數：【1】@background，需要對比的顔色對象 (A color object to compare against.) 【2】@darkcolor，可選項 – 指定的黑色（預設 black） 【3】@lightcolor，可選項 – 指定的白色（預設 white） 【4】@threshold，可選項 – 百分比 0-100% 界定深色過渡到淺色的轉變位置（預設 43%），這個數值決定了輸出結果偏向于哪一方，比如判斷 50% 的灰色背景應該顯示白色還是黑色的文字。一般來說，如果本色方案偏淺，則應該設低一點，否則設高一點。

  • contrast(#aaaaaa)

  • contrast(#222222, #101010)

  • contrast(#222222, #101010, #dddddd)

  • contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);

  • contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

  • #000000 // black

  • #ffffff // white

  • #dddddd

  • #000000 // black

  • #ffffff // white

顔色混合 (Color blending)

顔色混合的方式與圖像編輯器 Photoshop, Firework 或者 GIMP 的圖層混合模式 (layer blending modes) 相似，是以制作 .psd 檔案時處理顔色的方法可以同樣用在 CSS 中。

multiply

分别将兩種顔色的紅綠藍 (RGB) 三種值做乘法運算，然後再除以 255，輸出結果是更深的顔色。（譯注：對應Photoshop中的“變暗/正片疊底”。）

參數：【1】@color1，顔色對象 【2】@color2，顔色對象

screen

與 multiply() 函數效果相反，輸出結果是更亮的顔色。（譯注：對應Photoshop中的“變亮/濾色”。）

overlay

結合 multiply() 與 screen() 兩個函數的效果，令淺的顔色變得更淺，深的顔色變得更深。（譯注：對應Photoshop中的“疊加”。）注意：輸出結果由第一個顔色參數決定。

參數：【1】@color1，顔色對象，是用于疊加的顔色，也是結果是更亮還是更暗的決定因素  【2】@color2，顔色對象，被疊加的顔色

softlight

與 overlay() 函數效果相似，隻是當純黑色或純白色作為參數時輸出結果不會是純黑色或純白色。（譯注：對應Photoshop中的“柔光”。）

參數：【1】@color1，混合色（光源） 【2】@color2，被混合的顔色

hardlight

與 overlay() 函數效果相似，不過由第二個顔色參數決定輸出顔色的亮度或黑度，而不是第一個顔色參數決定。（譯注：對應Photoshop中的“強光/亮光/線性光/點光”。）

difference

從第一個顔色值中減去第二個（分别計算 RGB 三種顔色值），輸出結果是更深的顔色。（譯注：對應Photoshop中的“內插補點/排除”。）

參數：【1】@color1，被減的顔色對象 【2】@color2，減去的顔色對象

exclusion

效果與 difference() 函數效果相似，隻是輸出結果差别更小 (lower contrast)。（譯注：對應Photoshop中的“內插補點/排除”。）

average

分别對 RGB 的三種顔色值取平均值，然後輸出結果。

參數：【1】@color1，顔色對象 (A color object.) 【2】@color2，顔色對象 (A color object.)

negation

與 

difference()

 函數效果相反，輸出結果是更亮的顔色。請注意：效果相反不代表做加法運算。

上一篇: 【LESS系列】三角形Mixins
下一篇: ubuontu16.04安裝Opencv庫引發的find_package()錯誤資訊處理及其簡單使用