CODEWITHSUNDEEP
jquerycssless
Sathya
Sathya

Reputation: 5308

LESS - saturate color code using javascript / jquery

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())})

Upvotes: 0

Views: 593

Answers (1)

Sathya
Sathya

Reputation: 5308

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.

Upvotes: 1

Related Questions