如何在 JavaScript 中调用 Less.js 函数？

Question

如何在 JavaScript 中使用 less.js 函数？

我想在正常 JavaScript 内使用混合功能，found here，所以：

$('.orange-text').css({
    color: less.mix('#FF6B3A','#6600CC','50%')                       
});

但它总是未定义，而且我似乎找不到任何关于如何引用该函数的文档，但它肯定是可能的吗？

Answer 1

不能那样用。看到这个 answer。 less.js 是客户端预处理器，可将您的 less 样式转换为 css。

Answer 2

没有 "official" 方法，但您可以使用 functionRegistry 获得函数。

假设您有 less.js 包含在页面上

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

请注意，它使用 lessjs 内部结构，在迁移到其他 less 版本时完全不可靠。所以如果你只想使用一个mix函数，可以考虑找一些库，或者自己写一个混合函数。

30 秒谷歌搜索：https://gist.github.com/jedfoster/7939513

Answer 3

你可以用native写一个类似的方法javascript，思路很简单

将每种十六进制颜色拆分为其分量 RGB，并转换为整数
对于 R、G 和 B 中的每一个，在两种颜色之间插入由 weight（第三个参数）
将 3 个新整数中的每一个都转换回十六进制

下面的示例匹配 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>

Answer 4

我在 document 中创建了一个名为 lessToCSS 的辅助函数，您可以随时调用它，以便在您的应用程序中使用一些 less 来设置样式。

示例：

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

如何在 JavaScript 中调用 Less.js 函数？

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

javascript

jquery

less