codecamp

Less 颜色定义函数

描述

LESS中的颜色定义函数使定义和操作颜色变得超级简单，使用颜色函数可以帮助你控制颜色、更好地配色。

LESS提供了许多有用的颜色函数，以不同的方式改变和操作颜色。 LESS支持一些颜色定义功能，如下表所示:


S.N. 函数及描述 例子
1 rgb
它创建从红色，绿色和蓝色值的颜色。 它有以下参数：

  • 红色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。

  • 绿色:它包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。

  • 蓝色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 

 rgb(220,20,60)
它使用rgb值将颜色转换为:        
#dc143c
2 rgba
It determines color from red, green, blue and alpha values. It has following parameters:

  • 红色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。

  • 绿色:它包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。

  • 蓝色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。

  • alpha :它包含0到1之间的数字或0到100%之间的百分比。 

 rgba(220,20,60,0.5)
它使用rgba值将颜色对象转换为:        
 rgba(220,20,60,0.5)
3 argb
It defines hex representation of color in #AARRGGBB format. It uses below parameter:

  • color :它指定颜色对象。 

argb(rgba(176,23,31,0.5))
它返回argb颜色为:        
#80b0171f
4 hsl
It generates the color from hue, saturation and lightness values. It has following parameters:

  • hue :它包含介于0 - 360之间的整数，表示度数。

  • 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • 亮度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 

 hsl(120,100%，50%)
它使用HSL值返回颜色对象:        
#00ff00    
5 hsla
It generates the color from hue, saturation, lightness and alpha values. It has following parameters:

  • hue :它包含介于0 - 360之间的整数，表示度数。

  • 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • 亮度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • alpha :它包含0到1之间的数字或0到100%之间的百分比。 

hsla(0,100%，50%，0.5)
它使用HSLA值将颜色对象指定为:        
 rgba(255，0，0，0.5);

       
       
6 hsv
It produces the color from hue, saturation and value values. It contains following parameters:

  • hue :它包含介于0 - 360之间的整数，表示度数。

  • 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • value :它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 

hsv(80,90%，70%)
它将具有hsv值的颜色对象转换为:        
#7db312

7 hsvaIt produces the color from hue, saturation, value and alpha values. It uses following parameters:

  • hue :它包含介于0 - 360之间的整数，表示度数。

  • 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • value :它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。

  • alpha :它包含0到1之间的数字或0到100%之间的百分比。 

hsva(80,90%，70%，0.6)
它指定具有hsva值的颜色对象为:        
rgba(125,179,18,0.6)

       
       
Less 类型函数
Less 颜色通道函数
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

Less 基本教程

Less 语言特性

Less 函数

Less 用法

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }