Categories: Less 教程

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)

       

       


admin

这个人很懒,什么都没有留下~

Share
Published by
admin

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

5 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago