Sass.js在线编译

Question

OK, I am a bit confused. I've downloaded and included the sass.js files into my webpage head section:

<script src="assets/plugins/sassjs/sass.js"></script>

This is the code I have in the body part:

<span id="foo">This text should be green</span>

Below is the code I try to compile (placed in the head section too):

    <script>
    // init a SAAS instance
    var sass = new Sass();

    // Example
    var scss = '$color: green; #f00 { color: $color; }';
    sass.compile(scss, function(result) {
        console.log(result);
    });
    </script>

As a result I do have the compilation result output in the console, however the styles won't apply. Am I missing something and this is to be used with Node.js only? I really don't understand how this should work.

Answer 1

You need to add <style> element and insert the result to it:

// in HTML
<style id="sass"></style>

// in JS
document.getElementById('sass').innerText = result.text;