Less 函數

 

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(@color, 100%) 函數效果相同。由於顏色的飽和度不受色相值影響，因此輸出的顏色會稍顯暗淡 (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)

索引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(); // * 返回PIpow(@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); // 色相值增長 10mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色greyscale(@color); // 徹底移除飽和度，輸出灰色contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 若是 @color1 的 luma 值 > 43% 輸出 @darkcolor，不然輸出 @lightcolormultiply(@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); // 判斷一個值是不是urlispixel(@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#112233unit移除或替換屬性值 (dimension) 的單位。參數:@dimension: 數字，帶或不帶單位@unit: 可選，將要替換成的單位，若是省略則移除原單位例如：unit(5, px)輸出：5px例如：unit(5em)輸出：5data-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)輸出：3floor向下取整。參數：數字：浮點數返回值：向下取整後的整數例如：floor(2.6)輸出：2percentage將浮點數轉換爲百分比字符串。參數:數字：浮點數返回值：字符串例如：percentage(0.5)輸出：50%round(number, [places: 0])四捨五入取整。參數:數字：浮點數小數位數：數字，可選，四捨五入取整的小數點位置，默認值爲0。返回值：數字 (number)例如：round(1.67)輸出：2例如：round(1.67, 1)輸出：1.7sqrt計算一個數的平方根，原樣保持單位。參數：數字：浮點數返回值：數字，平方根例如：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)分別輸出：-1rad0radNaNrad有關反三角函數的知識能夠參見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.54030230586813980.99984769515639130.9998766324816606acos反餘弦函數，返回以弧度爲單位的角度，區間在 0 到 PI之間。參數：數字：浮點數，表明餘弦值，範圍爲 [-1,1]返回值：數字，角度例如：acos(0.5403023058681398)acos(1) acos(2)分別輸出：1rad0radNaNradtan正切函數，處理時會將沒有單位的數字認爲是弧度值。參數：數字：浮點數，角度返回值：數字，角度對應的正切值例如：sin(1); // 1弧度角的正切值sin(1deg); // 1角度角的正切值sin(1grad); // 1百分度角的正切值分別輸出：1.55740772465490230.0174550649282175850.015709255323664916atan反正切函數，返回以弧度爲單位的角度，區間在 -PI/2 到 PI/2之間。參數：數字：浮點數，表明正切值返回值：數字，角度例如：atan(-1.5574077246549023)atan(0)round(atan(22), 6) // 四捨五入輸出6位小數分別輸出：-1rad0rad1.525373rad;pi返回圓周率PI。參數：無返回值：數字，圓周率例如：pi()輸出：3.141592653589793pow假設第一個參數爲A，第二個參數爲B，返回A的B次方。返回值與A有相同的單位，B的單位被忽略。參數：數字：浮點數，基數數字：浮點數，冪指數返回值：數字，基數的冪指數次方例如：pow(0cm, 0px)pow(25, -2)pow(25, 0.5)pow(-25, 0.5)pow(-25%, -0.5)輸出：1cm0.00165NaNNaN%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 / turngrad爲「百分度」，見正弦函數下的說明。turn爲「圈/周」的意思，1turn爲360度。參數：數字：帶單位的數值，浮點數單位返回值：轉換單位後的數值例如：convert(9s, "ms")convert(14cm, mm)convert(8, mm) // 不兼容的單位輸出：9000ms140mm8Unit返回帶不一樣單位的數值。只有單位被改變，數值自己不會被轉換。函數會假設第二個參數帶上了合法單位。參數：數字：帶單位的浮點數單位返回值：帶單位的數值例如：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)輸出：#5a8120rgba(@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));輸出：#805a1794hsl(@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%)輸出：#408000hsva(@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%))輸出：90saturation(@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%))輸出：90hsvsaturation以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))輸出：10green(@color)從顏色對象中提取綠色值。參數:@color: 顏色對象 (A color object.)返回值：整數 0-255例如：green(rgb(10, 20, 30))輸出：20blue(@color)從顏色對象中提取藍色值。參數:@color: 顏色對象 (A color object.)返回值：整數 0-255例如：blue(rgb(10, 20, 30))輸出：30alpha(@color)從顏色對象中提取 alpha 值。參數:@color: 顏色對象 (A color object.)返回值：浮點數，介於 0-1 之間例如：alpha(rgba(10, 20, 30, 0.5))輸出：0.5luma(@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%)輸出：#800080rgba(75, 25, 0, 0.75)greyscale(@color)徹底移除顏色的飽和度，與 desaturate(@color, 100%) 函數效果相同。由於顏色的飽和度不受色相值影響，因此輸出的顏色會稍顯暗淡 (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)