Question

所以这看起来像一个简单的答案的简单问题，但我无法解决它。我使用Less，我只是无法弄清楚如何在javascript中使用less.js函数？

我想在普通的javascript中使用混合函数found here，所以：

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

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

非常感谢任何帮助。

Answer 1

没有＆＃34;官方＆＃34;方式，但您可以使用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 2

您可以使用原生javascript编写类似的方法，这个想法非常简单

将每个十六进制颜色拆分为其组件RGB，并转换为整数
分别为R，G＆amp; B在两种颜色之间插入由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);（第三参数）确定的数量
将3个新整数中的每一个转换回十六进制

下面的示例与less documentation example

＆＃13;

Mixing #ff0000 and #0000ff at 50% gives <span id="output"><span>

＆＃13;

{{1}}

＆＃13;

Answer 3

它不能以这种方式使用。见answer。 less.js是一个客户端预处理器，它将你的风格变为css。

Answer 4

我已经在lessToCSS中创建了一个名为document的辅助函数，只要您想在应用程序中使用更少的东西来设置样式，就可以调用它。

示例：

＆＃13;

(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%) }');
});

＆＃13;

.orange-text {
  background-color: orange;
}

＆＃13;

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

＆＃13;

在Javascript中调用Less.js函数

4 个答案: