How can I call a Less.js Function within JavaScript?

Question

How can I use a less.js function within JavaScript?

I want to use the mix function, found here , within normal JavaScript, so:

$('.orange-text').css({
    color: less.mix('#FF6B3A','#6600CC','50%')                       
});

But it is just always undefined, and I cannot seem to find any documentation on how to reference the function but surely its possible?

Answer 1

There is no "official" way, but you can get function using functionRegistry .

Assuming you have less.js included on the page

var mix = less.functions.functionRegistry.get('mix');

var Color = less.tree.Color;
var d50 = new less.tree.Dimension(50);

var c1 = new Color("000fff");
var c2 = new Color("ff0000");
console.log(mix(c1, c2, d50).toRGB());

Note, that it uses lessjs internals and totally not reliable when migrating to other less version. So if you want only use one mix function, consider to find some library, or write your own mixing function.

30sec of googling: https://gist.github.com/jedfoster/7939513

Answer 2

You can write a similar method using native javascript, the idea is pretty simple

1. Split each hex color into its component RGB, and convert to integers
2. for each of R,G & B interpolate between the two colours the amount determined by weight (the third parameter)
3. Convert each of the 3 new integers back to hex

Example below which matches the less documentation example

 function HexToRgb(hexstr){ var a = []; hexstr = hexstr.replace(/[^0-9a-f]+/ig, ''); if (hexstr.length == 3) { a = hexstr.split(''); } else if (hexstr.length == 6) { a = hexstr.match(/(\\w{2})/g); } else{ throw "invalid input, hex string must be in the format #FFFFFF or #FFF" } return a.map(function(x) { return parseInt(x,16) }); } function IntToHex(i){ var hex = i.toString(16); if(hex.length == 1) hex = '0' + hex; return hex; } function Mix(colorA,colorB,weight){ var a = HexToRgb(colorA); var b = HexToRgb(colorB); var c0 = Math.round((a[0] + (Math.abs(a[0]-b[0])*weight)) % 255); var c1 = Math.round((a[1] + (Math.abs(a[1]-b[1])*weight)) % 255); var c2 = Math.round((a[2] + (Math.abs(a[2]-b[2])*weight)) % 255); return "#" + IntToHex(c0) + IntToHex(c1) + IntToHex(c2) } document.getElementById("output").innerHTML = Mix("#ff0000","#0000ff",0.5);

 Mixing #ff0000 and #0000ff at 50% gives <span id="output"><span>

Answer 3

It cant be used in that way. see this answer . less.js is a client side pre-processor which turns your less style to css.

Answer 4

I've created a helper function named lessToCSS into the document , and you can call it, anytime you want to use some less to style something in your application.

Example:

 (function(d) { d.lessToCSS = function (css) { less.render(css).then(function(obj) { var stl = d.createElement('style'); stl.textContent = obj.css; d.querySelector('head').appendChild(stl); }); }; })(document); document.querySelector('button').addEventListener('click', function(e) { document.lessToCSS('.orange-text { background-color: mix(#FF6B3A, #6600CC, 50%) }'); });

 .orange-text { background-color: orange; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script> <div class="orange-text"> Test </div> <button>Change background</button>