LESS 是一种 CSS 预处理器，它给 CSS 添加了很多强大的功能和语言扩展。LESS 具有变量、混合、函数、嵌套等特性，极大地提高了 CSS 的可重用性和维护性。
本文将介绍 LESS 中常用的一些函数，并提供代码示例。这些函数可以帮助前端工程师更快速、高效地编写 CSS 样式代码。
1. darken 和 lighten
darken 和 lighten 这两个函数用于调整颜色的亮度。darken 可以让颜色变暗，lighten 可以让颜色变亮。函数的参数是颜色值和调整量，调整量为 0~100% 的值。
-- -------------------- ---- ------- -- - ---- ----- --- ------- ----- ---------- - ------ -------------- ----- - -- - ---- ----- --- ----------- - ------ --------------- ----- -
2. saturate 和 desaturate
saturate 和 desaturate 这两个函数用于调整颜色的饱和度。saturate 可以让颜色更加鲜艳，desaturate 可以让颜色更加灰暗。函数的参数是颜色值和调整量，调整量为 0~100% 的值。
-- -------------------- ---- ------- -- - ---- ------- --------------- ----- --------- - ------ ------------------------ ----- - -- - ---- ------- ----------------- ----- ----------- - ------ ---------------------------- ----- -
3. fadein 和 fadeout
fadein 和 fadeout 这两个函数用于调整颜色的透明度。fadein 可以让颜色从完全透明到完全不透明，fadeout 可以让颜色从完全不透明到完全透明。函数的参数是颜色值和调整量，调整量为 0~100% 的值。
-- -------------------- ---- ------- -- - ---- -------------- ------------- ----- ------- - ------ -------------------- ----- - -- - ---- -------------- -------------- ----- -------- - ------ ---------------------- ----- -
4. mix
mix 函数用于混合两个颜色，可以得到一个介于这两个颜色之间的新颜色。函数的参数是两个颜色值和混合程度，混合程度为 0~100% 的值。
// 将 #006 和 #fff 混合，混合程度为 30%
@mixColor1: #006;
@mixColor2: #fff;
.mixColor {
color: mix(@mixColor1, @mixColor2, 30%);
}5. round 和 ceil
round 和 ceil 函数用于四舍五入和向上取整数。函数的参数可以是任何类型的数字。
-- -------------------- ---- ------- -- - --- ------ ------------ - ------- ----------- - -- - --- ------ ----------- - ------- ---------- -
总结
LESS 函数是一种极为强大的功能，可以让前端工程师更快速、高效地编写 CSS 样式代码。本文介绍了 LESS 中常用的一些函数，并提供了代码示例。希望读者能在实践中体会到 LESS 函数的便利和实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477f7c1968c7c53b0440f04