How do you call a less.js function

I'm not even really sure how to ask this. The LESS CSS Framework contains several functions to manipulate color, I'd like to know how to call these functions myself to modify a color. The problem is that these functions are located inside another function and defined as such:

(function (tree) {
tree.functions = {
    darken: function(color, amount){
        ...stuff...
    }
}
}

I know enough to assume that darken is a method of tree.functions, but for the life of me don't know how to call it because it is inside of the anonymous function (function (tree).

[edit] After getting a solution from @pradeek I created this function incase anyone needs it. Can easily be adapted to all the other functions LESS has:

var lessColor = {
/*
|--------------------------------------------------------------------------
| Darken
|--------------------------------------------------------------------------
*/
darken: function(col, val){
    col = col.replace(/#/g, '');    //Remove the hash

    var color = new less.tree.Color(col);   //Create a new color object
    var amount = new less.tree.Value(val);      //Create a new amount object
    var newRGB = less.tree.functions.darken(color, amount); //Get the new color
    var hex = (newRGB.rgb[0] + 256 * newRGB.rgb[1] + 65536 * newRGB.rgb[2]).toString(16);
    hex = hex.split('.', 1);    //Remove everything after the decimal if it exists

    //Add padding to the hex to make it 6 characters
    while(hex.length < 6){
        hex = hex+'0';
    }
    hex = '#'+hex;  //Add the hash

    return hex; //return the color
}
}

And you can call it like so:

$(this).css('background', lessColor.darken($(this).css('background'), .25);

Answers:

Answer

EDIT: The darken function uses built-in primitives.

Here's how to use the darken function

var color = new less.tree.Color([255, 255, 255], 0.5),
    amount = new less.tree.Value(5);
less.tree.functions.darken(color, amount); // returns a Color object
Answer

Look at the un-minified code of LESS 1.7 right here.

Line 141 is this:

less = {};
tree = less.tree = {};

And is in the global scope. So the less object is defined in the browser.

Next, look at line 1254:

tree.functions = {

Your darken function is defined somewhere in there.


You can call darken like so:

less.tree.functions.darken(color, amount);
Answer

While this answer won’t tell you how to call less.js functions to manipulate color, it does provide a different approach to manipulate color, as this seems to be the main goal.

There exists a handy JavaScript library just for that: TinyColor.

TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.

To darken a color, simply

var darkenedColor = tinycolor("#f00").darken(20).toString(); // "#990000"

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.