Sass parser in JavaScript. This is a convenience API for the emscripted libsass (at v1.0.1). If you're looking to run Sass in node, you're probably looking for node-sass. Sass.js and node-sass should generate the same results.

A fair warning: minified it's 2MB, gzipped it's 550KB. node-sass is about 20 times faster than Sass.js

see the live demo

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.

<script src="dist/sass.min.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  var css = Sass.compile(scss);
  console.log(css);
</script>

<script src="dist/sass.worker.js"></script>
<script>
  // loading libsass.worker (subsequently loading libsass.js and sass.js inside the worker)
  Sass.initialize('dist/worker.min.js');
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  Sass.compile(scss, function(css) {
      console.log(css);
  });
</script>

You can - for debugging purposes - load Sass.js from src files. Emscripten litters the global scope with ~400 variables, so this should never be used in production!

<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>

// compile text to SCSS
Sass.compile(text);
// set compile style options
Sass.options({
  // format output: nested, expanded, compact, compressed
  style: Sass.style.nested, 
  // add line comments to output: none, default
  comments: Sass.comments.none
});
// register a file to be available for @import
Sass.writeFile(filename, text);
// remove a file 
Sass.removeFile(filename);
// get a file's content
Sass.readFile(filename);
// list all files (regardless of directory structure)
Sass.listFiles();

Chances are you want to use one of the readily available Sass mixins (e.g. drublic/sass-mixins or Bourbon). 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; }

• using libsass at v1.0.1 (instead of building from master)
• adding grunt build to generate dist files
• adding mocha tests grunt test

• Initial Sass.js

• Christian Kruse - @cjk101010
• Sebastian Golasch - @asciidisco
• Rodney Rehm - @rodneyrehm

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