You're reading from Sass and Compass Designer's Cookbook Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects

Product type Paperback

Published in Apr 2016

Publisher Packt

ISBN-13 9781783286935

Length 436 pages

Edition 1st Edition

Languages

CSS

Tools

Compass

Concepts

Web Design

Authors (2):

Bass Jobsen

Stuart Robson

View More author details

Table of Contents (18) Chapters

Preface

1. Getting Started with Sass FREE CHAPTER

2. Debugging Your Code

3. Variables, Mixins, and Functions

4. Nested Selectors and Modular CSS

5. Built-in Functions

6. Using Compass

7. Cross-Browser CSS3 Mixins

8. Advanced Sass Coding

9. Building Layouts with Sass

10. Building Grid-based Layouts with Susy and Sass

11. Foundation and Sass

12. Bootstrap and Sass

13. Meeting the Bourbon Family

14. Ruby on Rails and Sass

15. Building Mobile Apps

16. Setting up a Build Chain with Grunt

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:

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.html in 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 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
  });