Skip to content

Latest commit

 

History

History
48 lines (33 loc) · 1.54 KB

README.md

File metadata and controls

48 lines (33 loc) · 1.54 KB
Raw

sass.link.js

Link SCSS stylesheets directly in your browser (compiled via [lib]sass.js)

<link href="example.scss" type="text/scss" />
<style type="text/scss" base="assets/scss">
    @import "style.scss";
</style>
<script src="../dist/sass.link.min.js"></script>

It is basically a mashup of less.js and sass.js. The part to replace all referenced scss stylesheets inside a page has been taken from less.js. The actual compilation is done via sass.js (which is libsass to js via emscripten). Pretty amazing!

Imports within scss

I had to patch the sass.js library to have a hook to load requested files by synchronous XHR. This is expensive, as libsass tries to stat all possible names. There also seems to be a problem when an import path is set (which is preset to /sass/). I saw way too many stat calls so I reset the path to nothing in this implementation.

Compatibility

Tested with the latest versions of Firefox, Chrome, Opera and Internet Explorer. IE 9 and below will not work as it is not possible to compile libsass via emscripten that will still be runnable in IE 9 and below. It will currently error out with this message: "Assertion failed: Cannot fallback to non-typed array case: Code is too specialized".

Demo

Credits