大家一起学习less 2:自带函数
自带函数的意思是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) < threshold) {
return light;
} else {
return dark;
}
},
e: function (str) {
return new(tree.Anonymous)(str instanceof tree.JavaScript ? str.evaluated : str);
},
escape: function (str) {
return new(tree.Anonymous)(encodeURI(str.value).replace(/=/g, "%3D").replace(/:/g, "%3A").replace(/#/g, "%23").replace(/;/g, "%3B").replace(/\(/g, "%28").replace(/\)/g, "%29"));
},
'%': function (quoted /* arg, arg, ...*/) {
var args = Array.prototype.slice.call(arguments, 1),
str = quoted.value;
for (var i = 0; i < args.length; i++) {
str = str.replace(/%[sda]/i, function(token) {
var value = token.match(/s/i) ? args[i].value : args[i].toCSS();
return token.match(/[A-Z]$/) ? encodeURIComponent(value) : value;
});
}
str = str.replace(/%%/g, '%');
return new(tree.Quoted)('"' + str + '"', str);
},
round: function (n, f) {
// round(1.67); //四舍五入 returns 2
},
ceil: function (n) {
//ceil(2.4); //向上取整 returns 3
},
floor: function (n) {
// floor(2.6); //向下取整 returns 2
},
argb: function (color) {
// 兼容之前的版本,内部调用rgba
},
percentage: function (n) {
// percentage(0.5); // returns 50%
},
color: function (n) {
if (n instanceof tree.Quoted) {
return new(tree.Color)(n.value.slice(1));
} else {
throw {
type: "Argument",
message: "argument must be a string"
};
}
},
iscolor: function (n) {
//判定是颜色
},
isnumber: function (n) {
return this._isa(n, tree.Dimension);
},
isstring: function (n) {
return this._isa(n, tree.Quoted);
},
iskeyword: function (n) {
//判定是关键字
},
isurl: function (n) {
//判定URL
},
ispixel: function (n) {
//判定单位是px
return (n instanceof tree.Dimension) && n.unit === 'px' ? tree.True : tree.False;
},
ispercentage: function (n) {
//判定单位是%
},
isem: function (n) {
//判定单位是em
},
/* Blending modes */
multiply: function(color1, color2) {
var r = color1.rgb[0] * color2.rgb[0] / 255;
var g = color1.rgb[1] * color2.rgb[1] / 255;
var b = color1.rgb[2] * color2.rgb[2] / 255;
return this.rgb(r, g, b);
},
screen: function(color1, color2) {
var r = 255 - (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255;
var g = 255 - (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255;
var b = 255 - (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255;
return this.rgb(r, g, b);
},
overlay: function(color1, color2) {
var r = color1.rgb[0] < 128 ? 2 * color1.rgb[0] * color2.rgb[0] / 255 : 255 - 2 * (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255;
var g = color1.rgb[1] < 128 ? 2 * color1.rgb[1] * color2.rgb[1] / 255 : 255 - 2 * (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255;
var b = color1.rgb[2] < 128 ? 2 * color1.rgb[2] * color2.rgb[2] / 255 : 255 - 2 * (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255;
return this.rgb(r, g, b);
},
softlight: function(color1, color2) {
var t = color2.rgb[0] * color1.rgb[0] / 255;
var r = t + color1.rgb[0] * (255 - (255 - color1.rgb[0]) * (255 - color2.rgb[0]) / 255 - t) / 255;
t = color2.rgb[1] * color1.rgb[1] / 255;
var g = t + color1.rgb[1] * (255 - (255 - color1.rgb[1]) * (255 - color2.rgb[1]) / 255 - t) / 255;
t = color2.rgb[2] * color1.rgb[2] / 255;
var b = t + color1.rgb[2] * (255 - (255 - color1.rgb[2]) * (255 - color2.rgb[2]) / 255 - t) / 255;
return this.rgb(r, g, b);
},
hardlight: function(color1, color2) {
var r = color2.rgb[0] < 128 ? 2 * color2.rgb[0] * color1.rgb[0] / 255 : 255 - 2 * (255 - color2.rgb[0]) * (255 - color1.rgb[0]) / 255;
var g = color2.rgb[1] < 128 ? 2 * color2.rgb[1] * color1.rgb[1] / 255 : 255 - 2 * (255 - color2.rgb[1]) * (255 - color1.rgb[1]) / 255;
var b = color2.rgb[2] < 128 ? 2 * color2.rgb[2] * color1.rgb[2] / 255 : 255 - 2 * (255 - color2.rgb[2]) * (255 - color1.rgb[2]) / 255;
return this.rgb(r, g, b);
},
difference: function(color1, color2) {
var r = Math.abs(color1.rgb[0] - color2.rgb[0]);
var g = Math.abs(color1.rgb[1] - color2.rgb[1]);
var b = Math.abs(color1.rgb[2] - color2.rgb[2]);
return this.rgb(r, g, b);
},
exclusion: function(color1, color2) {
var r = color1.rgb[0] + color2.rgb[0] * (255 - color1.rgb[0] - color1.rgb[0]) / 255;
var g = color1.rgb[1] + color2.rgb[1] * (255 - color1.rgb[1] - color1.rgb[1]) / 255;
var b = color1.rgb[2] + color2.rgb[2] * (255 - color1.rgb[2] - color1.rgb[2]) / 255;
return this.rgb(r, g, b);
},
average: function(color1, color2) {
//取两个颜色的平均值
},
negation: function(color1, color2) {
var r = 255 - Math.abs(255 - color2.rgb[0] - color1.rgb[0]);
var g = 255 - Math.abs(255 - color2.rgb[1] - color1.rgb[1]);
var b = 255 - Math.abs(255 - color2.rgb[2] - color1.rgb[2]);
return this.rgb(r, g, b);
}
};
less官网的文档很不全啊，只能参照sass的看看