用于少编译的 Javascript 函数？

Question

I have an inline tag ....for example:

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

I need a javascript function to get the compiled css from this tag. I know how to compile it using less. What I really need is a function that returns to me the compiled css (as a string).

It seems a trivial question but I can't find anything online. 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);
  });
};

Then your HTML can follow:

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

Here is a JSFiddle ...(Due to JSFiddle's restrictions, I changed "style" to "div" )

I'd also considering wrapping it in the DOMContentLoaded handler too, just to make it a bit more fast.

Answer 2

Solved.... thanks to @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);
    });

  })
})

I've created this pen: link