call less.js function in javascript has different output in compare node.js -
during question want call less functions such darken, lighten , spin inside javascript. did in node.js , works:
#!/usr/bin/env node var less = require('less'); var args = process.argv.slice(2); less.render(".my{ color:lighten("+ args[0]+","+args[1]+"%); }", function (e, css) { console.log(css.match(/\#[0-9a-fa-f]+/)[0]); }); this output:
$ ./my "#000" 13.5 #222222 but did in html , less.js file , using solution in question , made this:
<html> <head> <title></title> <script language="javascript" src="less-1.7.0.min.js"></script> <script language="javascript"> var lesscolor = { /* |-------------------------------------------------------------------------- | lighten |-------------------------------------------------------------------------- */ lighten: function (col, val) { col = col.replace(/#/g, ''); //remove hash var color = new less.tree.color(col); //create new color object var amount = new less.tree.value(val); //create new amount object var newrgb = less.tree.functions.lighten(color, amount); //get new color var hex = (newrgb.rgb[0] + 256 * newrgb.rgb[1] + 65536 * newrgb.rgb[2]).tostring(16); hex = hex.split('.', 1); //remove after decimal if exists //add padding hex make 6 characters while (hex.length < 6) { hex = hex + '0'; } hex = '#' + hex; //add hash return hex; //return color } }; console.log(lesscolor.lighten("#000",13.5)); </script> </head> <body> </body> </html> but different output in console: 
i'm pretty sure #222222 correct result how can result inside javascript?
as can read comments following code give #222222:
var lesscolor = { lighten: function (color, amount) { color = new (less.tree.color)(color.substring(1)); amount = new(less.tree.dimension)(amount, '%'); return less.tree.functions.lighten(color, amount).torgb(); } }; console.log(lesscolor.lighten('#000',13.5)); notice color.substring(1) col.replace(/#/g, ''); removes starting #. input of less.tree.color hex color triplet less parser uses following code conversion:
var rgb; if (parserinput.currentchar() === '#' && (rgb = parserinput.$re(/^#([a-fa-f0-9]{6}|[a-fa-f0-9]{3})/))) { var colorcandidatestring = rgb.input.match(/^#([\w]+).*/); // strip colons, brackets, whitespaces , other characters should not part of color string colorcandidatestring = colorcandidatestring[1]; if (!colorcandidatestring.match(/^[a-fa-f0-9]+$/)) { // verify if candidate consists of allowed hex characters error("invalid hex color code"); } return new(tree.color)(rgb[1]); }
Comments
Post a Comment