LESS详解之函数(五)

蔚落 2022-09-17 13:28 254阅读 0赞

之前已经为大家介绍了一些LESS函数，大家应该对之前介绍的有所了解了。下面为大家介绍一系列的颜色运算函数。依旧会为大家附上小例子。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。

颜色值运算有几点注意事项：参数必须单位/格式相同;百分比将作为绝对值处理，比如 10% 增加 10%，结果是 20% 而不是 11%;参数值只能在限定的范围内;they do not wrap around (这一句不清楚意思，可能是指参数值不会在超过范围后自动从另一侧“穿越”回去。)。返回值时，除了十六进制的颜色值 (hex versions) 外将对其他格式做简化处理。

# 　　aturate饱和度增加 10%(@color, 10%) #

增加一定数值的颜色饱和度。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)。

*LESS代码*

div {
    	width:saturate(hsl(90, 90%, 50%), 10%);
    }

*编译后的CSS代码*

div {
      width: #80ff00;
    }

# 　　desaturate饱和度降低 10%(@color, 10%) #

降低一定数值的颜色饱和度。参数：@color: 颜色对象 (A color object.);@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:desaturate(hsl(90, 90%, 50%), 10%);
    }

*编译后的CSS代码*

div {
      width: #80e51a;
    }

# 　　lighten亮度增加 10%(@color, 10%) #

增加一定数值的颜色亮度。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:lighten(hsl(90, 90%, 50%), 10%);
    }

*编译后的CSS代码*

div {
      width: #99f53d;
    }

# 　　darken亮度降低 10%(@color, 10%) #

降低一定数值的颜色亮度。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:darken(hsl(90, 90%, 50%), 10%);
    }

*编译后的CSS代码*

div {
      width: #66c20a;
    }

# 　　fadein透明度增加 10%(@color, 10%) #

降低颜色的透明度(或增加不透明度)，令其更不透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 fadeout() 函数。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:fadein(hsla(90, 90%, 50%, 0.5), 10%);
    }

*编译后的CSS代码*

div {
      width: rgba(128, 242, 13, 0.6);
    }

# 　　fadeout透明度降低 10%(@color, 10%) #

增加颜色的透明度(或降低不透明度)，令其更透明，对不透明的颜色无效。如果要增加颜色的透明度，使用 fadein() 函数。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:fadeout(hsla(90, 90%, 50%, 0.5), 10%);
    }

*编译后的CSS代码*

div {
      width: rgba(128, 242, 13, 0.4);
    }

# 　　fade设定透明度为 50%(@color, 50%) #

给颜色(包括不透明的颜色)设定一定数值的透明度。参数：@color: 颜色对象 (A color object.)，@amount: 百分比 0-100%。返回值：颜色 (color)

*LESS代码*

div {
    	width:fade(hsl(90, 90%, 50%), 10%);
    }

*编译后的CSS代码*

div {
      width: rgba(128, 242, 13, 0.1);
    }

# 　　spin色相值增加 10(@color, 10) #

向任意方向旋转颜色的色相角度 (hue angle)，旋转范围 0-360，超过一周后将从起点开始继续旋转(+ - 控制方向)，比如旋转 360 度与 720 度是相同的结果。需要注意的是，颜色值会通过 RGB 格式转换，这个过程不能保留灰色的色相值(灰色没有饱和度，色相值也就没有意义了)，因此要确定使用函数的方法能够保留颜色的色相值，例如不要这样使用函数(LESS代码)：

div {
    	width:saturate(spin(#aaaaaa, 10), 10%);
    }

而应该用这种方法代替(LESS代码)：

div {
    	width:spin(saturate(#aaaaaa, 10%), 10);
    }

因为颜色值永远输出为 RGB 格式，因此 spin() 函数对灰色无效。参数:@color: 颜色对象 (A color object.)，@angle: 任意数字表示角度 (+ 或 – 表示方向)

返回值：颜色 (color)

*LESS代码*

div {
    	width:spin(hsl(10, 90%, 50%), 20);
    	height:spin(hsl(10, 90%, 50%), -20);
    }

*编译后的CSS代码*

div {
      width: #f27f0d;
      height: #f20d33;
    }

# 　　mix混合两种颜色(@color1, @color2, \[@weight: 50%\]) #

根据比例混合两种颜色，包括计算不透明度。参数：@color1: 颜色对象 (A color object.)，@color2: 颜色对象 (A color object.)，@weight: 可选项：平衡两种颜色的百分比, 默认 50%。返回值：颜色 (color)

*LESS代码*

div {
    	width:mix(#ff0000, #0000ff, 50%);
    	height:mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%);
    }

*编译后的CSS代码*

div {
      width: #800080;
      height: rgba(75, 25, 0, 0.75);
    }

# 　　greyscale完全移除饱和度输出灰色(@color) #

完全移除颜色的饱和度，与 desaturate(@color, 100%) 函数效果相同。因为颜色的饱和度不受色相值影响，所以输出的颜色会稍显暗淡 (dull or muddy);如果使用luma值可能会有更好的结果，因为它提取的是百分比亮度，而不是线性亮度。比如greyscale('\#0000ff')与greyscale('\#00ff00')会得出相同的结果，尽管对人眼来说，它们的亮度是不一样的。参数：@color: 颜色对象 (A color object.)。返回值：颜色 (color)

*LESS代码*

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

*编译后的CSS代码*

div {
      width: #808080;
    }

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

*LESS代码*

div {
    	width:contrast(#aaaaaa);
    	height:contrast(#222222, #101010);
    	padding:contrast(#222222, #101010, #dddddd);
    	color:contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
    	background-color:contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);
    }

*编译后的CSS代码*

div {
      width: #000000;
      height: #ffffff;
      padding: #dddddd;
      color: #000000;
      background-color: #000000;
    }

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