大家一起学习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的看看