Question

我有一个内联标签....例如：

memset

我需要一个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

用于编译的Javascript函数较少？

2 个答案: