LibSass for JavaScript, called sass.js in short, also offers the opportunity to run the Sass compiler in browsers. In this recipe, you will learn how to run Sass in browsers with sass.js. sass.js is the only pure JavaScript implementation of LibSass, and it should generate the same output as node-sass does.
You should not use the code in this recipe for production. Besides, JavaScript files are large; you do not want every user of your website having to compile your client-side stylesheets.
Bower is a package manager for the web-optimized for the frontend. You can install bower by running the following command:
npm install - bower
You can run the following command to install sass.js and jQuery:
bower install sass.js jquery
After installing sass.js, you will need a text editor to edit the HTML file and a browser to inspect the results. You can also find the source code of this recipe in the downloaded files of this book.
Here is how you can compile Sass code in your browser:
Use your favorite text editor to write down the following HTML code in a file called
demo.html:<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sass in browser</title> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/sass.js/dist/sass.js"></script> <style id="csscode"></style> <script> Sass.initialize('bower_components/sass.js/dist/sass.worker.js'); function compileCSS(color) { var options = {}; Sass.compile('$color: ' + color + '; h1 { color: $color; }', function(result){ $('#csscode').html(result.text); }); } compileCSS('orange'); </script> </head> <body> <h1>Colored text</h1> <form> Enter color name and hit enter: <input type="text" value="orange" name="color" /> <input type="submit" /> </form> <script> $( 'form' ).submit(function(event) { color = $( 'input[name="color"]' ).val(); compileCSS(color); event.preventDefault(); }); </script> </body> </html>Now open
demo.htmlin your web browser. It will look like the following screenshot:
Test the demo by entering another color name in the input field and pressing submit. You will find that the color of the
colored textwill change according to your input.
Every time you hit the submit button, the sass.js compiler will compile the following code:
$color: {color};
h1 { color: $color; }With {color} depending on your input, your input should be a valid color name. The 147 color names defined by the
Scalable Vector Graphics (SVG) are according to their specifications used by HTML and CSS3 too. See also http://www.w3.org/TR/css3-color/. You can use any valid CSS color value in Sass, so rgb(0,255,255) or even rgba(0,255,255,0.5) can be used too. You can read more about color usage in Sass in the Color functions
recipe of Chapter 5, Built-In Functions.
The demo uses jQuery to insert the compiled CSS into the DOM (in line with the tag of the head section). jQuery is a feature-rich JavaScript library that can be used for HTML document traversal and manipulation, and event handling. Neither Sass nor sass.js requires jQuery for compiling.
In the Editing and debugging your Sass code in browser recipe of Chapter 2, Debugging Your Code, you can read how to debug your Sass code in a browser using the Google Chrome browser. Although the code of this recipe runs in a browser, the sass.js compiler is not used here. In browsers, debugging uses the Ruby Sass compiler with the watch function or LibSass with live reload.
As it has already been made clear, you should not use sass.js for production in the first place. When you use Sass for a demo proposal as in this recipe, and you need to compile Sass based on user input, you can reduce the total load time leveraging a web worker. A web worker is a JavaScript that runs in the background, independently of other scripts. Sass.js ships with a web worker, which can be invoked as follows:
<script src="dist/sass.js"></script>
<script>
// telling sass.js where it can find the worker,
// url is relative to document.URL
Sass.initialize('dist/sass.worker.js');Because sass.js runs in a browser and does not have access to your files' system, you should register individual files before using them with the @import directive. The following is an example code that shows you how to register files:
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.text);l
});
You can read more about sass.js at https://github.com/medialize/sass.js.
Sass.js had been compiled with Emscripten. Emscripten is an LLVM-based project that compiles C and C++ into highly optimizable JavaScript in the asm.js format. You can read more about Emscripten at http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html.