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?

Is this the only function you want to use (mixing 2 colors)? Or do you want access to every less function? — Jamiec
– Jamiec, Commented Sep 17, 2015 at 14:22
Yes and i want to be able to pass any percentage in and get the corresponding color — Joe Maher
– Joe Maher, Commented Sep 17, 2015 at 14:32

Andrey · Accepted Answer · 2015-09-17 14:39:43Z

5

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

answered Sep 17, 2015 at 14:39

Andrey

4,05023 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamiec · Accepted Answer · 2015-09-17 14:45:28Z

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

Split each hex color into its component RGB, and convert to integers
for each of R,G & B interpolate between the two colours the amount determined by weight (the third parameter)
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>

Community · Accepted Answer · 2017-05-23 12:03:53Z

1

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.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 17, 2015 at 14:19

BenG

15.2k5 gold badges48 silver badges62 bronze badges

1 Comment

Joe Maher Over a year ago

Is there any way to mimic the functionality?

Buzinas · Accepted Answer · 2015-09-17 14:57:04Z

1

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>

edited Sep 17, 2015 at 14:57

answered Sep 17, 2015 at 14:51

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

1 Comment

Buzinas Over a year ago

The advangage of this answer is that you can use any CSS you would include in a .less file and less will render for you. You don't need to get the function, and then call it, nor use the less trees etc.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related