LESS详解之函数(三)

怼烎@ 2022-09-17 13:24 424阅读 0赞

LESS自带有很多的函数，之前已经为大家介绍过两次有关LESS函数的小知识了，相比大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS的函数，附加着一些小例子。

# 　　mod(number, number)取余 #

返回第一个参数对第二参数取余的结果。返回值与第一个参数单位相同，第二个参数单位被忽略。这个函数也可以处理负数和浮点数。参数：数字，浮点数;数字，浮点数。返回值：数字，取余的结果。

*LESS代码*

div {
    	width:mod(0cm, 0px);
    	height:mod(11cm, 6px);
    	padding:mod(-26%, -5);
    }

*编译后的CSS代码*

div {
      width: NaNcm;
      height: 5cm;
      padding: -1%;
    }

# 　　convert(number, units)在数字之间转换 #

将数字从一种类型转换到另一种类型。第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。

兼容的单位组——长度：m / cm / mm / in / pt / pc；时间：s / ms；角度：rad / deg / grad / turn

grad为“百分度”，见正弦函数下的说明。turn为“圈/周”的意思，1turn为360度。

参数：数字，带单位的数值，浮点数；单位。

返回值：转换单位后的数值

*LESS代码*

div {
    	width:convert(9s, "ms");
    	height:convert(14cm, mm);
    	/*不兼容的单位*/
    	padding:convert(8, mm);
    }

*编译后的CSS代码*

div {
      width: 9000ms;
      height: 140mm;
      /*不兼容的单位*/
      padding: 8;
    }

# 　　rgb(@r, @g, @b)转换为颜色值 #

通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色。

参数：

@red: 整数 0-255 或百分比 0-100%

@green: 整数 0-255 或百分比 0-100%

@blue: 整数 0-255 或百分比 0-100%

返回值：颜色 (color)

*LESS代码*

div {
    	color:rgb(90, 129, 32);
    }

*编译后的CSS代码*

div {
      color: #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)

*LESS代码*

div {
    	color:rgba(90, 129, 32, 0.5);
    }

*编译后的CSS代码*

div {
      color: rgba(90, 129, 32, 0.5);
    }

# 　　argb(@color)创建 \#AARRGGBB 格式的颜色值 #

创建格式为 \#AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 \#RRGGBBAA !)。这种格式被用在IE滤镜中，以及.NET和Android开发中。参数：@color: 颜色对象 (A color object.)

返回值：字符串 (string)

*LESS代码*

div {
        color:argb(rgba(90, 23, 148, 0.5));
    }
    span {
        color:argb(#555);
    }

*编译后的CSS代码*

div {
      color: #805a1794;
    }
    span {
      color: #ff555555;
    }

# 　　hsl(@hue, @saturation, @lightness)创建颜色值 #

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

参数：

@hue: 整数 0-360 表示度数。

@saturation: 百分比 0-100% 或数字 0-1

@lightness: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

*LESS代码*

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

*编译后的CSS代码*

div {
      color: #80ff00;
    }

# 　　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)

*LESS代码*

div {
    	color:hsl(90, 100%, 50%, 0.5);
    }

*编译后的CSS代码*

div {
      color: #80ff00;
    }

# 　　hsv(@hue, @saturation, @value)创建颜色值 #

通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV) 创建不透明的颜色对象。注意与 HSL 不同，这是另一种在Photoshop中可用的色彩空间。

参数:

@hue: 整数 0-360 表示度数

@saturation: 百分比 0-100% 或数字 0-1

@value: 百分比 0-100% 或数字 0-1

返回值：颜色 (color)

*LESS代码*

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

*编译后的CSS代码*

div {
      color: #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)

*LESS代码*

div {
    	color:hsva(90, 100%, 50%, 0.5);
    }

*编译后的CSS代码*

div {
      color: rgba(64, 128, 0, 0.5);
    }

# 　　hue(@color); // 从颜色值中提取 hue 值(色相) #

从颜色对象中提取色相值。

参数：

@color: 颜色对象 (A color object.)

返回值：整数，范围从0-360

*LESS代码*

div {
    	color:hue(hsl(90, 100%, 50%));
    }

*编译后的CSS代码*

div {
      color: 90;
    }

LESS详解之函数(三)就为大家介绍到这里了，这只是LESS函数中的一小部分。后面的几天将为大家一波儿接着一波儿的介绍LESS详解之函数。希望这一波儿一波儿的介绍LESS详解之函数能为大家有所帮助。

LESS详解之函数(三)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 LESS详解之函数(七)

相关 LESS详解之函数(六)

相关 LESS详解之函数(五)

相关 LESS详解之函数(四)

相关 LESS详解之函数(三)

相关 LESS详解之函数(二)

相关 LESS详解之函数(一)

相关 LESS详解之嵌套(&)

相关 LESS详解之变量(@)

相关 LESS详解之编译LESS