LESS颜色定义函数

简介

LESS是一种CSS预处理器，提供了一些常规CSS所没有的功能，如变量、嵌套、混合等等。色值定义是CSS样式中很重要的一个方面，LESS提供了一些非常有用的颜色定义函数。

LESS颜色定义函数

darken()

darken()函数可以让颜色变暗。darken(color,amount)中，color表示要变暗的颜色，amount表示颜色变暗程度，0%代表不变化，100%表示完全变为黑色。

.darken-blue {
  background-color: darken(blue, 10%);
}

输出：

.darken-blue {
  background-color: #0a225c;
}

lighten()

lighten()函数可以让颜色变亮。lighten(color,amount)中，color表示要变亮的颜色，amount表示颜色变亮程度，0%代表不变化，100%表示完全变为白色。

.lighten-yellow {
  background-color: lighten(#FFFF00, 40%);
}

输出：

.lighten-yellow {
  background-color: #ffff66;
}

saturate()

saturate()函数可以增加图片的饱和度。saturate(color,amount)中，color表示要增加饱和度的颜色，amount表示增加的饱和度，0%代表不变化。

.saturate-green {
  filter: saturate(green, 50%);
}

输出：

.saturate-green {
  filter: saturate(150%);
}

desaturate()

desaturate()函数可以减少图片的饱和度。desaturate(color,amount)中，color表示要减少饱和度的颜色，amount表示减少的饱和度，0%代表不变化。

.desaturate-red {
  filter: desaturate(#FF0000, 50%);
}

输出：

.desaturate-red {
  filter: saturate(50%);
}

spin()

spin()函数可以改变颜色的色相。spin(color,angle)中，color表示要改变色相的颜色，angle表示改变的角度，正数代表逆时针旋转，负数代表顺时针旋转。

.spin-blue {
  background-color: spin(blue, 120deg);
}

输出：

.spin-blue {
  background-color: #007fff;
}

mix()

mix()函数可以混合两种颜色。mix(color1,color2,weight)中，color1和color2表示要混合的颜色，weight表示两种颜色的混合比例，0%代表纯color1，100%代表纯color2。

.mix-green-blue {
  background-color:mix(green, blue, 50%);
}

输出：

.mix-green-blue {
  background-color: #008080;
}

总结

LESS的颜色定义函数大大增加了开发者的工作效率和灵活性，让开发者能够更加方便地改变和控制颜色。学习和掌握这些函数能够帮助你更好地实现你的设计想法。www