Less函式說明

水之原發表於2013-12-26

索引

  • escape(@string); // 通過 URL-encoding 編碼字串
  • e(@string); // 對字串轉義
  • %(@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"); // * 判斷一個值是否是指定單位的數值

含*號的函式只在1.4.0 beta以上版本中可用

函式解析

字串函式 (String functions)

escape(@string)

使用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 可以被除了顏色的之外的任何型別引數替換。如果你將它們和字串一起使用,則只有字串的值會被使用,引號會被忽略。

引數:

  • 字串:帶有佔位符的格式化字串
  • 任意值:用於替換佔位符的值

返回值:格式化後的字串

例如:

  • 使用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(@string)

解析顏色,將代表顏色的字串轉換為顏色值,引數必須是16進製表示的顏色或者縮寫寫法。

引數:

  • @字串:代表顏色值的字串

例如:

color("#445566")
color(~"#123")

輸出:

#445566
#112233

unit

移除或替換屬性值 (dimension) 的單位。

引數:

  • @dimension: 數字,帶或不帶單位
  • @unit: 可選,將要替換成的單位,如果省略則移除原單位

例如:

unit(5, px)

輸出:

5px

例如:

unit(5em)

輸出:

5

data-uri

將一個資源使用BASE64編碼嵌入到樣式檔案,如果開啟了ieCompat選項,而且資原始檔的體積過大或者是在瀏覽器中使用,則會使用url()進行回退。如果沒有指定MIME,則Node.js會使用MIME包來決定正確的MIME。

引數:

  • mimetype: MIME字串,可選引數
  • 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(number, [places: 0])

四捨五入取整。

引數:

  • 數字:浮點數
  • 小數位數:數字,可選,四捨五入取整的小數點位置,預設值為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

正弦函式,處理時會將沒有單位的數字認為是弧度值。

引數:

  • 數字:浮點數,角度
  • 返回值:數字,角度對應的正弦值

例如:

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的單位被忽略。

引數:

  • 數字:浮點數,基數
  • 數字:浮點數,冪指數

返回值:數字,基數的冪指數次方

例如:

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

輸出:

1cm
0.0016
5
NaN
NaN%

mod

返回第一個引數對第二引數取餘的結果。返回值與第一個引數單位相同,第二個引數單位被忽略。這個函式也可以處理負數和浮點數。

引數:

  • 數字:浮點數
  • 數字:浮點數

返回值:數字,取餘的結果

例如:

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

輸出:

NaNcm;
5cm
-1%;

convert

將數字從一種型別轉換到另一種型別。第一個引數為帶單位的數值,第二個引數為單位。如果兩個引數的單位是相容的,則數字的單位被轉換。如果兩個引數的單位不相容,則原樣返回第一個引數。

相容的單位組:

  • 長度:m / cm / mm / in / pt / pc
  • 時間:s / ms
  • 角度:rad / deg / grad / turn

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

引數:

  • 數字:帶單位的數值,浮點數
  • 單位

返回值:轉換單位後的數值

例如:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // 不相容的單位

輸出:

9000ms
140mm
8

Unit

返回帶不同單位的數值。只有單位被改變,數值本身不會被轉換。函式會假設第二個引數帶上了合法單位。

引數:

  • 數字:帶單位的浮點數
  • 單位

返回值:帶單位的數值

例如:

unit(9s, ~"ms")
unit(-9, m)

輸出:

9ms
-9m

顏色函式 (Color functions)

color

見“綜合函式”部分

rgb(@r, @g, @b)

通過十進位制紅色,綠色,藍色三種值 (RGB) 建立不透明的顏色物件。在 HTML/CSS 中也會用文字顏色值 (literal color values) 定義顏色,例如 red -> #ff0000

引數:

  • @red: 整數 0-255 或百分比 0-100%
  • @green: 整數 0-255 或百分比 0-100%
  • @blue: 整數 0-255 或百分比 0-100%

返回值:顏色 (color)

例如:

rgb(90, 129, 32)

輸出:

#5a8120

rgba(@r, @g, @b, @a)

通過十進位制紅色,綠色,藍色,以及 alpha 四種值 (RGBA) 建立帶alpha透明的顏色物件。

引數:

  • @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(@color)

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

引數:

  • @color: 顏色物件 (A color object.)

返回值:字串 (string)

例如:

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

輸出:

#805a1794

hsl(@hue, @saturation, @lightness)

通過色相 (hue),飽和度 (saturation),亮度 (lightness) 三種值 (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(@hue, @saturation, @lightness, @alpha)

通過色相 (hue),飽和度 (saturation),亮度 (lightness),以及 alpha 四種值 (HSLA) 建立透明的顏色物件。

引數:

  • @hue: 整數 0-360 表示度數
  • @saturation: 百分比 0-100% 或數字 0-1
  • @lightness: 百分比 0-100% 或數字 0-1
  • @alpha: 百分比 0-100% 或數字 0-1

返回值:顏色 (color)

例如:

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

輸出:

rgba(128, 255, 0, 0.5)

hsv(@hue, @saturation, @value)

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

引數:

  • @hue: 整數 0-360 表示度數
  • @saturation: 百分比 0-100% 或數字 0-1
  • @value: 百分比 0-100% 或數字 0-1

返回值:顏色 (color)

例如:

hsv(90, 100%, 50%)

輸出:

#408000

hsva(@hue, @saturation, @value, @alpha)

通過色相 (hue),飽和度 (saturation),色調 (value),以及 alpha 四種值 (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)

hue(@color)

從顏色物件中提取色相值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:整數,範圍從0-360

例如:

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

輸出:

90

saturation(@color)

從顏色物件中提取飽和度值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:百分比值 0-100

例如:

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

輸出:

100%

lightness(@color)

從顏色物件中提取亮度值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:百分比值 0-100

例如:

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

輸出:

50%

hsvhue

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

引數:

  • 顏色

返回:整數,範圍為0-360

例如:

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

輸出:

90

hsvsaturation

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

引數:

  • 顏色

返回值:百分比,範圍0-100

例如:

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

輸出:

100%

hsvvalue

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

引數:

  • 顏色

返回:百分比,範圍為0-100

例如:

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

輸出:

50%

red(@color)

從顏色物件中提取紅色值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:整數 0-255

例如:

red(rgb(10, 20, 30))

輸出:

10

green(@color)

從顏色物件中提取綠色值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:整數 0-255

例如:

green(rgb(10, 20, 30))

輸出:

20

blue(@color)

從顏色物件中提取藍色值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:整數 0-255

例如:

blue(rgb(10, 20, 30))

輸出:

30

alpha(@color)

從顏色物件中提取 alpha 值。

引數:

  • @color: 顏色物件 (A color object.)

返回值:浮點數,介於 0-1 之間

例如:

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

輸出:

0.5

luma(@color)

計算顏色物件的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定義的SMPTE C / Rec. 709 coefficients。 這個計算公式也用在 contrast() 函式中。

引數:

  • @color: 顏色物件 (A color object.)

返回值:百分比 0-100%

例如:

luma(rgb(100, 200, 30))

輸出:

65%

顏色運算 (Color operations)

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

saturate(@color, 10%)

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

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

saturate(hsl(90, 90%, 50%), 10%)

輸出:

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

desaturate(@color, 10%)

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

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

lighten(@color, 10%)

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

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

darken(@color, 10%)

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

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

fadein(@color, 10%)

降低顏色的透明度(或增加不透明度),令其更不透明,對不透明的顏色無效。如果要增加顏色的透明度,使用 fadeout() 函式。

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

fadeout(@color, 10%)

增加顏色的透明度(或降低不透明度),令其更透明,對不透明的顏色無效。如果要增加顏色的透明度,使用 fadein() 函式。

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

fade(@color, 50%)

給顏色(包括不透明的顏色)設定一定數值的透明度。

引數:

  • @color: 顏色物件 (A color object.)
  • @amount: 百分比 0-100%

返回值:顏色 (color)

例如:

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

輸出:

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

spin(@color, 10)

向任意方向旋轉顏色的色相角度 (hue angle),旋轉範圍 0-360,超過一週後將從起點開始繼續旋轉(+ - 控制方向),比如旋轉 360 度與 720 度是相同的結果。需要注意的是,顏色值會通過 RGB 格式轉換,這個過程不能保留灰色的色相值(灰色沒有飽和度,色相值也就沒有意義了),因此要確定使用函式的方法能夠保留顏色的色相值,例如不要這樣使用函式:

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

而應該用這種方法代替:

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

因為顏色值永遠輸出為 RGB 格式,因此 spin() 函式對灰色無效。

引數:

  • @color: 顏色物件 (A color object.)
  • @angle: 任意數字表示角度 (+ 或 – 表示方向)

返回值:顏色 (color)

例如:

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

輸出:

#f27f0d // hsl(30, 90%, 50%)
#f20d33 // hsl(350, 90%, 50%)

mix(@color1, @color2, [@weight: 50%])

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

引數:

  • @color1: 顏色物件 (A color object.)
  • @color2: 顏色物件 (A color object.)
  • @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)

greyscale(@color)

完全移除顏色的飽和度,與 desaturate(@color100%) 函式效果相同。因為顏色的飽和度不受色相值影響,所以輸出的顏色會稍顯暗淡 (dull or muddy);如果使用luma值可能會有更好的結果,因為它提取的是百分比亮度,而不是線性亮度。比如greyscale('#0000ff')greyscale('#00ff00')會得出相同的結果,儘管對人眼來說,它們的亮度是不一樣的。

引數:

  • @color: 顏色物件 (A color object.)

返回值:顏色 (color)

例如:

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

輸出:

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

contrast(@background, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%])

這個函式對比 @background 的 luma 值與 @threshold 引數的大小,如果大於輸出 @darkcolor, 小於則輸出 @lightcolor,便於選擇相對於背景更容易閱讀的顏色,同時提高了使用顏色的靈活性,與 Compass 的contrast() 函式 工作方式相同。根據 WCAG 2.0 應該對比顏色的 luma 值,而不是亮度值 (lightness)。

引數:

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

返回值:顏色 (color)

例如:

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(@color1, @color2)

分別將兩種顏色的紅綠藍 (RGB) 三種值做乘法運算,然後再除以 255,輸出結果是更深的顏色。(譯註:對應Photoshop中的“變暗/正片疊底”。)

引數:

  • @color1: 顏色物件
  • @color2: 顏色物件

返回值:顏色 (color)

screen(@color1, @color2)

與 multiply() 函式效果相反,輸出結果是更亮的顏色。(譯註:對應Photoshop中的“變亮/濾色”。)

引數:

  • @color1: 顏色物件
  • @color2: 顏色物件

返回值:顏色 (color)

overlay(@color1, @color2)

結合 multiply() 與 screen() 兩個函式的效果,令淺的顏色變得更淺,深的顏色變得更深。(譯註:對應Photoshop中的“疊加”。)注意:輸出結果由第一個顏色引數決定。

引數:

  • @color1: 顏色物件,是用於疊加的顏色,也是結果是更亮還是更暗的決定因素。 @color2: 顏色物件,被疊加的顏色

返回值:顏色 (color)

softlight(@color1, @color2)

與 overlay() 函式效果相似,只是當純黑色或純白色作為引數時輸出結果不會是純黑色或純白色。(譯註:對應Photoshop中的“柔光”。)

引數:

  • @color1: 混合色(光源)
  • @color2: 被混合的顏色

返回值:顏色 (color)

hardlight(@color1, @color2)

與 overlay() 函式效果相似,不過由第二個顏色引數決定輸出顏色的亮度或黑度,而不是第一個顏色引數決定。(譯註:對應Photoshop中的“強光/亮光/線性光/點光”。)

引數:

  • @color1: 混合色(光源)
  • @color2: 被混合的顏色

返回值:顏色 (color)

difference(@color1, @color2)

從第一個顏色值中減去第二個(分別計算 RGB 三種顏色值),輸出結果是更深的顏色。(譯註:對應Photoshop中的“差值/排除”。)

引數:

  • @color1: 被減的顏色物件
  • @color2: 減去的顏色物件

返回值:顏色 (color)

exclusion(@color1, @color2)

效果與 difference() 函式效果相似,只是輸出結果差別更小 (lower contrast)。(譯註:對應Photoshop中的“差值/排除”。)

引數:

  • @color1: 被減的顏色物件
  • @color2: 減去的顏色物件

average(@color1, @color2)

分別對 RGB 的三種顏色值取平均值,然後輸出結果。

引數:

  • @color1: 顏色物件 (A color object.)
  • @color2: 顏色物件 (A color object.)

返回值:顏色 (color)

negation(@color1, @color2)

與 difference() 函式效果相反,輸出結果是更亮的顏色。請注意:效果相反不代表做加法運算。

引數:

  • @color1: 被減的顏色物件
  • @color2: 減去的顏色物件

返回值:顏色 (color)

相關文章