自带函数的意思是less自身准备的一套函数，可以让你直接在less文本中直接使用，它们90%是与颜色相关的。从源码可以看到，它们都挂在less.tree.functions之下：
rgb rgba hsl hsla hue saturation lightness alpha saturate desaturate lighten darken fadein fadeout fade spin mix greyscale e escape % round ceil floor _math argb percentage color iscolor isnumber isstring iskeyword isurl ispixel ispercentage isem _isa
下面是我对这些方法的一些理解
tree.functions = {
rgba: function (r, g, b, a) {
//返回一个tree.Color 实例
//https://github.com/cloudhead/less.js/blob/master/lib/less/tree/color.js
},
rgb: function (r, g, b) {
return this.rgba(r, g, b, 1.0);
},
hsl: function (h, s, l) {
return this.hsla(h, s, l, 1.0);
},
hsla: function (h, s, l, a) {
//内部调用rgba
},
hue: function (color) {
//传入一个tree.Color实例,返回它的色相
//http://en.wikipedia.org/wiki/Hue
return new(tree.Dimension)(Math.round(color.toHSL().h));
},
saturation: function (color) {
//传入一个tree.Color实例,返回它的饱和度
//http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html
return new(tree.Dimension)(Math.round(color.toHSL().s * 100), '%');
},
lightness: function (color) {
//传入一个tree.Color实例,返回它的亮度
//http://msdn.microsoft.com/en-us/library/ie/aa358801(v=vs.85).aspx
//http://en.wikipedia.org/wiki/Lightness
return new(tree.Dimension)(Math.round(color.toHSL().l * 100), '%');
},
red: function (color) {
//传入一个tree.Color实例,返回它的red值,一个颜色是由红绿蓝这三原色组成,外加透明度
return new(tree.Dimension)(color.rgb[0]);
},
green: function (color) {
//传入一个tree.Color实例,返回它的green值
return new(tree.Dimension)(color.rgb[1]);
},
blue: function (color) {
//传入一个tree.Color实例,返回它的blue值
return new(tree.Dimension)(color.rgb[2]);
},
alpha: function (color) {
//传入一个tree.Color实例,返回它的透明度
return new(tree.Dimension)(color.toHSL().a);
},
//上面hue,saturation,lightness,red,green,alpha是用于取得颜色值的具体属性值的
luma: function (color) {
/*
返回一个与当前传入的颜色值对比比较强烈的颜色
This adds a contrast function that given an existing colour, returns a contrasting colour value, either black/white, or other configurable light/dark values, and the threshold at which the colour choice is made is configurable too.
Cases where you might want to use this:
ensuring text contrasts with a given background colour
ensuring background contrasts with a given text colour
ensuring borders contrast with background
ensuring links contrast with normal text
building gradients with sufficient colour range
这形成了对比函数,给出一个现有的色彩,返回一个对比颜色值,要么黑/白,或其他可配置的光/暗值,和的门槛,颜色的选择也是可配置的。
情况下,您可能想要使用这个:
确保文本与给定的背景颜色
确保背景与给定的文本颜色
确保边界与背景相比
确保与正常文本链接的对比
创建具有足够的颜色范围渐变
https://github.com/cloudhead/less.js/pull/730
*/
},
saturate: function (color, amount) {
// 增加饱和度,第二个参数为百分数,内部调用hsla
},
desaturate: function (color, amount) {
// 减小饱和度,第二个参数为百分数,内部调用hsla
},
lighten: function (color, amount) {
// 变淡一点,第二个参数为百分数,内部调用hsla
},
darken: function (color, amount) {
// 变暗一点,第二个参数为百分数,内部调用hsla
},
fadein: function (color, amount) {
//通过改变透明度,让它显示出来
},
fadeout: function (color, amount) {
//通过改变透明度,让它隐褪
},
fade: function (color, amount) {
//通过改变透明度
},
spin: function (color, amount) {
//在color的hue 中增加或减少amount值,amount为数值
},
//
// Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein
// http://sass-lang.com
//
mix: function (color1, color2, weight) {
//将两个颜色合并成一个新的颜色
},
greyscale: function (color) {
//减少当前颜色的灰度
return this.desaturate(color, new(tree.Dimension)(100));
},
contrast: function (color, dark, light, threshold) {
if (typeof light === 'undefined') {
light = this.rgba(255, 255, 255, 1.0);
}
if (typeof dark === 'undefined') {
dark = this.rgba(0, 0, 0, 1.0);
}
if (typeof threshold === 'undefined') {
threshold = 0.43;
} else {
threshold = threshold.value;
}
if (((0.2126 * (color.rgb[0]/255) + 0.7152 * (color.rgb[1]/255) + 0.0722 * (color.rgb[2]/255)) * color.alpha)
less官网的文档很不全啊，只能参照sass的看看