Skip to content

medialize/sass.js

Repository files navigation

Sass.js

Sass parser in JavaScript. This is a convenience API for the emscripted libsass. If you're looking to run Sass in node, you're probably looking for node-sass

A fair warning: minified it's 2MB, gzipped it's 550KB.

see the live demo

Known Problems

  • compile styles nested, expanded and compact seem to behave exactly the same
  • compile style compressed prefixes every selector with &

(We haven't looked into why this is happening yet)

Sass.js API

Sass.js comes in two flavors – the synchronous in-document sass.js and the asynchronous worker sass.worker.js. The primary API - wrapping the Emscripten runtime - is provided with sass.js (it is used internally by sass.worker.js as well). sass.worker.js mimics the same API (adding callbacks for the asynchronous part) and passes all the function calls through to the web worker.

Synchronous in-document sass.js

<script src=https://github.com/medialize/sass.js/tree/"src/sass.js"> <script> var scss = '$someVar: 123px; .some-selector { width: $someVar; }'; var css = Sass.compile(scss); console.log(css); </script>">
<!-- loading libsass.js and sass.js into your document -->
<script src="src/libsass.js"></script>
<script src="src/sass.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  var css = Sass.compile(scss);
  console.log(css);
</script>

Warning: src/libsass.js will litter your global scope with Emscripten's runtime. It's great for debugging, but you really want to use sass.worker.js.

Asynchronous worker sass.worker.js

<!-- loading libsass.worker.js and sass.worker.js into your document -->
<script src="src/sass.worker.js" data-libsass-worker="src/libsass.worker.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  Sass.compile(scss, function(css) {
      console.log(css);
  });
</script>

Working With Files

Chances are you want to use one of the readily available Sass mixins (e.g. drublic/sass-mixins or Burbon). While Sass.js doesn't feature a full-blown "loadBurbon()", registering files is possible:

Sass.writeFile('one.scss', '.one { width: 123px; }');
Sass.writeFile('some-dir/two.scss', '.two { width: 123px; }');
Sass.compile('@import "one"; @import "some-dir/two";');

outputs

.one {
  width: 123px; }

.two {
  width: 123px; }

API Overview

//TODO: proper API documentation
Sass.compile(text);
Sass.options({
  style: Sass.style.nested, 
  comments: Sass.comments.none
});
Sass.writeFile(filename, text);
Sass.removeFile(filename);
Sass.readFile(filename);
Sass.listFiles();

Authors

License

Sass.js is - as libsass and Emscripten are - published under the MIT License.