LESS詳解之函數(四)

以前已經爲你們介紹了一些LESS函數，你們應該對以前介紹的有所瞭解了。下面依舊爲你們介紹LESS的函數，附加着一些小例子。但願這些有關LESS的函數能在你們編寫LESS的時候有所幫助。

saturation從顏色值中提取飽和度(@color)

從顏色對象中提取飽和度值。參數：@color: 顏色對象 (A color object.)。返回值：百分比值 0-100。

LESS代碼

 

div {
	width:saturation(hsl(90, 100%, 50%));
}

 

 

編譯後的CSS代碼

 

div {
  width: 100%;
}

 

 

lightness從顏色值中提取亮度(@color)

從顏色對象中提取亮度值。參數：@color: 顏色對象 (A color object.)。返回值：百分比值 0-100

LESS代碼

 

div {
	width:lightness(hsl(90, 100%, 50%));
}

 

 

編譯後的CSS代碼

 

div {
  width: 50%;
}

 

 

hsvhue從顏色中提取色相(@color)

以HSV色彩空間提取顏色中的色相值。參數：顏色。返回：整數，範圍爲0-360

LESS代碼

 

div {
	width:hsvhue(hsv(90, 100%, 50%));
}

 

 

編譯後的CSS代碼

 

div {
  width: 90;
}

 

 

hsvsaturation以HSV色彩空間提取顏色中的飽和度值(@color)

從顏色中提取 saturation 值，以HSV色彩空間表示(飽和度)。參數：顏色。返回值：百分比，範圍0-100

LESS代碼

 

div {
	width:hsvsaturation(hsv(90, 100%, 50%));
}

 

 

編譯後的CSS代碼

 

div {
  width: 100%;
}

 

 

hsvvalue以HSV色彩空間提取顏色中的色調值(@color)

從顏色中提取 value 值，以HSV色彩空間表示(色調)。參數：顏色。返回：百分比，範圍爲0-100

LESS代碼

 

div {
	width:hsvvalue(hsv(90, 100%, 50%));
}

 

 

編譯後的CSS代碼

 

div {
  width: 50%;
}

 

 

red從顏色對象中提取紅色值(@color)

從顏色值中提取 'red' 值(紅色)。參數：@color: 顏色對象 (A color object.)。返回值：整數 0-255

LESS代碼

 

div {
	width:red(rgb(10, 20, 30));
}

 

 

編譯後的CSS代碼

 

div {
  width: 10;
}

 

 

green從顏色對象中提取綠色值(@color)

從顏色值中提取 'green' 值(綠色)。參數：@color: 顏色對象 (A color object.)。返回值：整數 0-255

LESS代碼

 

div {
	width:green(rgb(10, 20, 30));
}

 

 

編譯後的CSS代碼

 

div {
  width: 20;
}

 

 

blue從顏色對象中提取藍色值(@color)

從顏色值中提取 'blue' 值(藍色)。參數：@color: 顏色對象 (A color object.)。返回值：整數 0-255

LESS代碼

 

div {
	width:blue(rgb(10, 20, 30));
}

 

 

編譯後的CSS代碼

 

div {
  width: 30;
}

 

 

alpha從顏色對象中提取 alpha 值(@color)

從顏色值中提取 'alpha' 值(透明度)。參數：@color: 顏色對象 (A color object.)。返回值：浮點數，介於 0-1 之間

LESS代碼

 

div {
	width:alpha(rgba(10, 20, 30, 0.5));
}

 

 

編譯後的CSS代碼

 

div {
  width: 0.5;
}

 

 

 

luma從顏色值中提取亮度的百分比(@color)

 

計算顏色對象的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定義的SMPTE C / Rec. 709 coefficients。 這個計算公式也用在 contrast() 函數中。參數：@color: 顏色對象 (A color object.)。返回值：百分比 0-100%

LESS代碼

 

div {
	width:luma(rgb(100, 200, 30));
}

 

 

編譯後的CSS代碼

 

div {
  width: 65%;
}

 

LESS詳解之函數(四)就爲你們介紹到這裏了，這只是LESS函數中的一小部分。後面的幾天將爲你們一波兒接着一波兒的介紹LESS詳解之函數。但願這一波兒一波兒的介紹LESS詳解之函數能爲你們有所幫助。