Skip to main content

Node.js

Install Sass, Node.js and Grunt on Mac OS X

By Sue Johnson

What are Sass, Node and Grunt?

Sass, Node and Grunt logos

Sass is CSS preprocessor which means it can use CSS like a programming language. For example, it can use variables so I could just define the brand colour as a variable and use that variable in the code. If it changes, I only need to change it once.

Node enables JavaScript to be run on a server instead of in the browser.

Grunt is a task runner. It runs on Node.js. It makes repetitive tasks such as compiling Sass quick and easy to do.

Install SASS

You will need to ensure Ruby is installed. It should be installed by default on Mac OS X. To check if it is installed type the following into the terminal.

ruby -v

It should give you the Ruby version number.

You will also need to install Xcode. Note that it currently requires Mac OS 10.12.6 or later. To check if Xcode is already installed, type this into the terminal:

xcode-select -p

You should get the following output:

/Library/Developer/CommandLineTools

You need to do this prior to installing Sass otherwise you will get an error. Xcode is available for free on the Apple store here: https://itunes.apple.com/us/app/xcode/id497799835?mt=12

Now you can install Sass:

sudo gem install sass

To check if it is successfully installed, type sass -v into the terminal:

It should come up with the version.

Install Node.js

The best way to install Node is by using Homebrew https://brew.sh/. Homebrew makes it easy to uninstall Node if you don’t want it any more. Type the following into the terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

To check if it is successfully installed, type brew doctor into the terminal:

It should come up with a message like this:

Your system is ready to brew

Next you can use Homebrew to install Node:

brew install node

To check if Node is successfully installed, type node -v into the terminal. It should give the version number.

Install Grunt

You can install Grunt if you want to use Grunt with Sass. You will need to install the grunt command line interface globally.

sudo npm install -g grunt-cli

Now you can use projects which have a Gruntfile or create your own. The Grunt Node module needs to be installed for each project, it will be specified in the Gruntfile if you are using one which is already created.

To install node modules with grunt, navigate to the directory containing the Gruntfile and run the following command in the terminal:

npm install

This will install all the node modules specified in the Gruntfile.
What will you do with Sass and Grunt?