问题描述
在此问题期间，我想少打些电话javascript内部变暗，变亮和旋转等功能.我是这样在node.js中完成的，并且有效:
during this question i want to call some less functions such as darken, lighten and spin inside javascript. i did it in node.js like this and it 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]);
});
这是输出:
$ ./my "#000" 13.5
#222222
但是我在html和less.js文件中进行了操作，并在，然后进行以下操作:
but i did in html and less.js file and using solution in this question and 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 the hash
var color = new less.tree.Color(col); //Create a new color object
var amount = new less.tree.Value(val); //Create a new amount object
var newRGB = less.tree.functions.lighten(color, amount); //Get the new color
var hex = (newRGB.rgb[0] + 256 * newRGB.rgb[1] + 65536 * newRGB.rgb[2]).toString(16);
hex = hex.split('.', 1); //Remove everything after the decimal if it exists
//Add padding to the hex to make it 6 characters
while (hex.length < 6) {
hex = hex + '0';
}
hex = '#' + hex; //Add the hash
return hex; //return the color
}
};
console.log(lessColor.lighten("#000",13.5));
</script>
</head>
<body>
</body>
</html>
，但控制台中的输出不同:
but different output in console:
我很确定#222222是正确的结果，但是如何在javascript中获取此结果?
i'm pretty sure #222222 is correct result but how can i get this result inside javascript?
推荐答案
从注释中可以看出，以下代码将为您提供#222222:
As can be read from the comments the following code will give you #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));
请注意，与col.replace(/#/g, '');一样，color.substring(1)也会删除起始的#. less.tree.Color的输入是十六进制颜色三元组，较少的解析器使用以下代码进行该转换:
Notice that color.substring(1) just like col.replace(/#/g, ''); removes the starting #. The input of less.tree.Color is the hex color triplet the less parser uses the following code for that 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 and other characters that should not definitely be part of color string
colorCandidateString = colorCandidateString[1];
if (!colorCandidateString.match(/^[A-Fa-f0-9]+$/)) { // verify if candidate consists only of allowed HEX characters
error("Invalid HEX color code");
}
return new(tree.Color)(rgb[1]);
}
这篇关于javascript中的调用less.js函数在比较node.js中具有不同的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！