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.worker.js"></script>
<script>
// loading libsass.worker
Sass.initialize('dist/worker.min.js');
var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
Sass.compile(scss, function(css) {
console.log(css);
});
</script>It is possible - but not recommended to use sass.js without in the main RunLoop instead of using a 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>You can - for debugging purposes - load sass.js from source files. Emscripten litters the global scope with ~400 variables, so this MUST never be used in production!
Note: you need to have run
grunt build:libsassbefore this is possible
<script src="libsass/libsass/lib/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, function callback(result) {
// (string) result is the compiled CSS
});
// 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
}, function callback(){});
// register a file to be available for @import
Sass.writeFile(filename, text, function callback(success) {
// (boolean) success is
// `true` when the write was OK,
// `false` when it failed
});
// remove a file
Sass.removeFile(filename, function callback(success) {
// (boolean) success is
// `true` when deleting the file was OK,
// `false` when it failed
});
// get a file's content
Sass.readFile(filename, function callback(content) {
// (string) content is the file's content,
// `undefined` when the read failed
});
// list all files (regardless of directory structure)
Sass.listFiles(function callback(list) {
// (array) list contains the paths of all registered files
});// compile text to SCSS
var result = 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
var success = Sass.writeFile(filename, text);
// remove a file
var success = Sass.removeFile(filename);
// get a file's content
var content = Sass.readFile(filename);
// list all files (regardless of directory structure)
var list = 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";', function(result) {
console.log(result);
});outputs
.one {
width: 123px; }
.two {
width: 123px; }grunt build
# destination:
# dist/sass.js
# dist/sass.min.js
# dist/sass.worker.js
# dist/worker.js
# dist/worker.min.js# using grunt:
grunt build:libsass
# using bash:
(cd libsass && build-libsass.sh)
# destination:
# libsass/libsass/lib/libsass.js- fixing
Makefile.patchfor "memory file" to work with emscripten 1.29
- fixing
Makefile.patchto work with libsass 3.1.0 - upgrading to libsass 3.1.0
- upgrading to libsass 2.1.0-beta
- upgrading to libsass v2.0 - Sending #386, #387, #388
- upgrading to libsass @1122ead... (to be on par with node-sass v.0.8.3)
- using libsass at v1.0.1 (instead of building from master)
- adding
grunt buildto generatedistfiles - adding mocha tests
grunt test
- Initial Sass.js
Sass.js is - as libsass and Emscripten are - published under the MIT License.