Using the sass-gulp plugin with Gulp

As you know, Sass was originally written in Ruby. People wrote a port of Sass in C/C++ called LibSass, which can also be used in a development environment outside of Ruby. LibSass can easily be implemented in other languages and people have reported that LibSass is about 4,000% faster than the original Sass library (http://www.moovweb.com/blog/libsass/).

In fact, LibSass is just a library that needs an implementer. Implementers for the library can be written in any language. Implementers for C (command-line usage), Node, JavaScript, PHP, C#, and many other languages and platforms are available already.

The node-sass can be used in a Grunt/Gulp workflow. Nowadays, many developers use Grunt/Gulp workflows to compile their Sass code. This recipe will give you a short impression on how to compile Sass code with Gulp. Chapter 3, Variables, Mixins, and Functions, of this book describes the usage of Gulp to set build chains in more detail.

Getting ready

To use gulp-sass (uses node-sass), you should install Node.js (npm) and Gulp on your system first. Node.js is a platform built on Chrome's JavaScript runtime to easily build fast, scalable network applications. Gulp is a task runner or a build system written for Node.

You also have to install gulp-sass by running the following command in your console:

npm install gulp-sass

How to do it...

The following step will show you how to use Gulp and gulp-sass to compile your Sass code into CSS code:

1. Create an example Sass file called main.scss and save this file in the sass folder. The content of this file can look as follows:

   $color: orange;
   
   p {
     color: $color;
   }

2. Then, create your Gulpfile.js file as follows:

   var gulp = require('gulp');
   var sass = require('gulp-sass');
    
   gulp.task('sass', function () {
       gulp.src('./sass/*.scss')
           .pipe(sass())
           .pipe(gulp.dest('./css'));
   });

3. Now, running gulp in your console will output to your console, as follows:

   [17:22:51] Using gulpfile ~/Gulpfile.js
   [17:22:51] Starting 'sass'...
   [17:22:51] Finished 'sass' after 24 ms

4. The preceding command creates a new file called css/main.css. This CSS file contains the following CSS code now:

   p {
    color: orange; }

How it works...

The gulp-sass plugin is a plugin for Gulp that enables you to compile your Sass code with node-sass. node-sass is the node interpreter for LibSass.

As it has been already explained, Gulp is a task runner. The Gulpfile.js file defines the task. This file has been written in the JSON format.

The gulp.src ('./sass/*.scss') code reads all the files with the .scss extension from the sass folder. The content of each file is compiled with the sass() command from the gulp-sass plugin. And the compiled CSS will finally be saved in the folder set by gulp.dest().

Each SCSS file will be compiled in a new CSS file, but notice that the partial files (see the Working with partials recipe of this chapter) are ignored.

There's more...

Gulp is just like Grunt—a task runner for node. Grunt does not use streams like Gulp, but saves results directly in files. Grunt has a longer history and a big community too. On the other hand, people find streams (saving file contents in memory) more intuitive and the number of Gulp plugins grows fast. In this book, Gulp is used for setting up build chains without saying that it's better than Grunt or any other task runner. Bootstrap, as discussed in Chapter 12, Bootstrap and Sass, of this book, uses Grunt, while Foundation uses Gulp. You can read more about Foundation in Chapter 11, Foundation and Sass. You can read more about Grunt in Chapter 16, Setting up a Build Chain with Grunt, of this book.

Also, a gulp version for Ruby Sass is available at https://github.com/sindresorhus/gulp-ruby-sass. In the past, the Sass Ruby gem was leading in regards to developing new features. Because LibSass was not directly updated after the releases of Ruby Sass, there were differences between Ruby Sass and LibSass. Recently, LibSass has become part of the Sass community, and Ruby Sass and LibSass are maintained at the same speed as much as possible. Some minor differences between both the versions can be found, but Ruby Sass will usually wait for feature parity with LibSass.

See also

• Sass Compatibility is a database that reports incompatibilities between different Sass engines. If you want to be sure about whether a feature differs between Ruby Sass and LibSass, you can look up information about the future in the database at http://sass-compatibility.github.io/. The website of Sass Compatibility will also give you the possibility of comparing different versions of the same engine.
• Read more about Gulp at http://gulpjs.com/.
• Read more about Grunt at http://gruntjs.com/.