LESS - saturate color code using javascript / jquery

Question

As per LESSCSS documentation, i can apply saturation like below in LESS file.

background-color: saturate(#A0F809, 25%);

But i am going to populate a list in javascript and each list item has it's own background color. And i need to apply hover color by saturating 25% from it's background color. How can i do this in javascript / jquery?

I tried LESS parser. But it expects me to pass css class, it is not accepting css style.

This works:

parser = new(less.Parser);
parser.parse('.class{background-color: saturate(#CD6667, 25%)}', function(err, tree) {console.log(tree.toCSS())})

But not this:

parser = new(less.Parser);
parser.parse('background-color: saturate(#CD6667, 25%)', function(err, tree) {console.log(tree.toCSS())})

Can you set up an example in a jsfiddle? also, what's the error message? — I don't use this profile anymo
– I don't use this profile anymo, Commented Sep 12, 2013 at 11:41

Sathya · Accepted Answer · 2013-09-26 09:39:43Z

1

This works. You can call most of these functions like below.

color = "#235689";
color = color.replace("#", "");

//get less color object
color = new less.tree.Color(color); 

//saturate it 50%
color = less.tree.functions.saturate(color, {value: 50}).toCSS();

now color returns 50% saturated color.

answered Sep 26, 2013 at 9:39

Sathya

5,3148 gold badges45 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

LESS - saturate color code using javascript / jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related