Add libsass

Sass, and it’s port libsass, is the leading CSS pre-processor and by far the most feature rich. But one thing that separates libsass from others in the JavaScript community is that it’s not written in JavaScript. It’s actually written in C/C++. So, the same library is portable to just about any language that a wrapper can be written for. And by far the most popular wrapper is node-sass.

All of this doesn’t really matter. The only thing this means is that we need to go through some additional, although extremely simple, setup steps.

First, let’s install Node-Sass:

  1. $ npm install --save node-sass

This will install the Node wrapper for Sass and the C/C++ libsass library. Next, in order for Grunt to make use of the library, we need to add the Grunt-Sass package.

  1. $ npm install grunt-sass --save

To get all of this integrated into the project, we simply need to update the Gruntfile.js.

  1. module.exports = function(grunt) {
  2.   grunt.initConfig({
  3.     sass: {
  4.       dist: {
  5.         files: {
  6.           'public/stylesheets/style.css': 'sass/style.scss'
  7.         }
  8.       }
  9.     }
  10.   });
  12.   grunt.loadNpmTasks('grunt-sass');
  13.   grunt.registerTask('default', ['sass']);
  14. };

In the files: object you will list the path to the output CSS and then the path to the input SCSS file.

Add the Sass

To get this running, we need to add the sass directory and put the style.scss file in there. In the root of the project:

  1. $ mkdir sass

In the sass directory:

  1. $ touch style.scss

And add the following Sass so that we know this is working:

  1. $color: orange;
  3. body {
  4.   background-color: $color;
  5. }

Run Grunt

At this point we are ready to run a grunt command and process some Sass.