Rob Davarnia

Javascript

How to install Sass & Compass with Grunt?

Posted on .

How to install Sass & Compass with Grunt?

Introduction

In order to use Sass & Compass with Grunt we will need NPM (node package manager), Node.js, Ruby, Sass and Compass.

Here’s how you can get started:

Windows

  1. Install Ruby using the Ruby Installer
  2. Install Compass. Open command prompt and run the following command:
    gem install compass
    
  3. Install Node.js & NPM. Download the installer and run.
    http://nodejs.org/download/
  4. Open command prompt and run the following commands:Ensure that npm is up-to-date
    npm update -g npm
    
  5. Install Grunt (you may need to be an administrator or ‘run as administrator’):
    npm install -g grunt-cli
    

Mac OS X

  1. Mac OS X comes with Ruby. You can skip this step.**
  2. Install Compass. Open terminal and run the following command:
    sudo gem install compass
    
  3. Install Node.js & NPM. Download the installer and run.
    http://nodejs.org/download/
  4. Open terminal and run the following commands:
    Ensure that npm is up-to-date

    npm update -g npm
    
  5. Install Grunt (you may need to be an administrator or ‘run as administrator’):
    npm install -g grunt-cli
    
    or
    
    sudo npm install -g grunt-cli
    

** You can also use brew package manager for Mac. I’d suggest going that route if are comfortable with terminal.

Paid Solutions:

If you are looking for an easier way to get up and running with Sass, and Compass, Codekit is a great program for Mac, and Prepros for Windows.

Boilerplate Project to get started:

https://github.com/robdvr/Grunt-Sass-Compass-Boilerplate-Project

profile

Rob Davarnia

http://robdvr.com

I’m a Developer from Orange County, California. I'm a huge supporter of Open Source Projects, and making Web a better place.

Comments
  • user

    AUTHOR Hennell

    Posted on 5:05 am June 22, 2015.
    Reply

    Thanks for the instructions, got me on the right road to getting grunt working.

    As an addendum to your instructions however it seems installing node via the installer on OS X causes a load of permissions issues (it seems to install by root, requiring everything else to be install as root ad infinitum!)

    I’d suggest changing the instructions to recommend brew installing as standard as that seems to be far easier to clean up if it installs badly! (This site has some instructions on the best way to install with brew to get round more permisions issues safely too: http://www.johnpapa.net/how-to-use-npm-global-without-sudo-on-osx/)

    (Also not so sure about the black text on a black background style for your code examples…)

    • user

      AUTHOR Rob Davarnia

      Posted on 8:53 am October 28, 2015.
      Reply

      Glad it was helpful! I fixed the black background style.

      I should probably revisit, and write this in gulp now!

  • user

    AUTHOR polgfred

    Posted on 6:38 am October 28, 2015.
    Reply

    Check your styles, all the code blocks are just black boxes.

    • user

      AUTHOR Rob Davarnia

      Posted on 8:53 am October 28, 2015.
      Reply

      Thanks Fred! It’s been updated.

  • Leave a Reply to Rob Davarnia Cancel reply

    View Comments (5) ...
    Navigation