Book Image

Sass and Compass Designer's Cookbook

By : Bass Jobsen, Stuart Robson
Book Image

Sass and Compass Designer's Cookbook

By: Bass Jobsen, Stuart Robson

Overview of this book

Sass and Compass Designer's Cookbook helps you to get most out of CSS3 and harness its benefits to create engaging and receptive applications. This book will help you develop faster and reduce the maintenance time for your web development projects by using Sass and Compass. You will learn how to use with CSS frameworks such as Bootstrap and Foundation and understand how to use other libraries of pre-built mixins. You will also learn setting up a development environment with Gulp. This book guides you through all the concepts and gives you practical examples for full understanding.
Table of Contents (23 chapters)
Sass and Compass Designer's Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using Sass in the browsers


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.

Getting ready

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.

How to do it...

Here is how you can compile Sass code in your browser:

  1. 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>
  2. Now open demo.html in your web browser. It will look like the following screenshot:

  3. Test the demo by entering another color name in the input field and pressing submit. You will find that the color of the colored text will change according to your input.

How it works...

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.

There's more...

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
  });

See also

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