Javascript函數讓編譯更少？

Question

我有一個內嵌標籤....例如：

<style> 
    @body-color:#f00; 
    body { 
     color:@body-color; 
    } 
</style> 

我需要一個JavaScript函數來得到這個標記編譯CSS。 我知道如何使用less編譯它。我真正需要的是一個函數，它返回給我編譯的CSS（作爲一個字符串）。

這似乎是一個微不足道的問題，但我無法在網上找到任何東西。 Thx。

Answer 1

Using this reference：

var styles = document.getElementsByTagName("div"), style; 
for (var i = 0; i < styles.length; i++) { 
    // A bit more simple, and so we don't have to reference it over and over. 
    style = styles[i]; 

    // A less token, you can remove this if you want to it parse all <style> tags. 
    if (!style.hasAttribute("data-less")) return; 

    // Render 
    less.render(style.innerHTML) 
    .then(function(output){ 

    // Set the parse less (CSS) to the <style> tag. 
    style.innerHTML = output.css 
    }, function(err){ 

    // Log error... 
    console.log(err); 
    }); 
}; 

那麼你的HTML可以遵循：

<style data-less> 
    @body-color:#f00; 
    body { 
     color:@body-color; 
    } 
</style> 

Here is a JSFiddle ...（由於的jsfiddle的限制，我改變"style"到"div"）

我還考慮將它封裝在DOMContentLoaded處理程序中，以使其更快一些。

Answer 2

解決....感謝@Blackhole

HTML：

<div> 
    <textarea id="in" cols="50" rows="8"> 
     @we:"bold"; 

     body{ 
     font-weight:@we; 
     } 

    </textarea> 
</div> 
<div> 
    <button>COMPILE</button> 
</div> 

<div> 

    <textarea id="out" cols="50" rows="8"> 


    </textarea> 
</div> 

JS：

$("body").ready(function(){ 
    $("button").click(function(){ 
    var css = $("#in").val(); 

    less.render(css, null, function(error, output) { 
     $("#out").val(output.css); 
    }); 

    }) 
}) 

我創造了這個筆： link