在Javascript中調用Less.js函數

Question

所以這看起來像一個簡單的問題，但我只是不能解決它。即時通訊使用較少，我只是不能解決如何在javascript中使用less.js功能？

我想使用的混合功能，found here，正常的javascript內，所以：

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

但它只是總是不確定的，我似乎無法找到如何引用功能，但肯定的任何文件這是可能的？

任何幫助，非常感謝。

Answer 1

沒有「官方」的方式，但你可以使用functionRegistry獲得功能。

假設你已經包含了網頁

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

註上less.js，它使用lessjs內部並遷移到其他less版本時完全不可靠的。所以如果你只想使用一個mix函數，可以考慮找一些庫，或者編寫你自己的混合函數。

使用Google的30秒：https://gist.github.com/jedfoster/7939513

Answer 2

它不能以這種方式使用。請參閱answer。 less.js是一個客戶端預處理器，將你的風格轉化爲css。

Answer 3

可以使用原生的JavaScript寫一個類似的方法，我們的想法很簡單

1. 拆分每個十六進制顏色到它的分量RGB，並轉換爲整數
2. 對於每個R，G & B在兩種顏色之間插值由weight（第三參數）確定的量
3. 將三個新整數中的每一個詛咒

例低於匹配less documentation example

function HexToRgb(hexstr){ 
 
    var a = []; 
 
    \t 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

我創建了一個名爲lessToCSS到document一個輔助函數，你可以調用它，任何時候你想少用一些來在你的應用程序中設計一些東西。

例子：

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