Quick start guide to installing SASS, Grunt & Compass for your next web project
October 17, 2015 5:41 pmLeave your thoughts
There are some excellent workflow tools that can save you heaps of time and effort in the development process, but they require some initial legwork to setup which can be off-putting when you just want to get your project kicked off. This is a bare bones step-by-step tutorial to getting one of my favourite workflows up and running on a windows machine with a few useful tasks to automate some of your processes. The workflow includes SASS for pre-processing CSS, Grunt.js for task management, the Compass framework for writing more efficient SASS, Susy for responsive grids and live browser reloading for rapid in browser development. Even if you’ve never used these tools before you should be able to follow along and get a working development environment to play around with. First of all lets get the main installation procedures out the way to make sure we have all the software and libraries we are likely to reuse across future projects (Node/Grunt, Ruby, Compass & Susy). We will be using Grunt.js to manage tasks in our workflow and Grunt.js requires Node.js so the first step is to install Node.js. Head to https://nodejs.org/en/ and click the install button on the homepage:
![node-js-install](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/node-js-install.jpg)
node -v
. You should see something like the following which is the version of Node.js you have installed – if you receive a ‘command not recognised’ error something has gone awry in the installation process, go back and try again.
![node-js-installed](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/node-js-installed.jpg)
sudo npm install -g grunt-cliAs this guide is for Windows we also need to install Ruby which is required to run SASS so head to http://rubyinstaller.org/ and grab the latest version of Ruby (Mac’s already have Ruby installed). Again the install process is a simple walk-though, just follow the steps – the only notable setting to enable during the install process is the ‘Add Ruby executables to your PATH’. This will prevent us from having to type long path names to find the SASS compiler once everything is up and running.
![ruby-install](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/ruby-install.jpg)
gem install compassYou should see something similar to the output below:
![compass-install](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/compass-install.jpg)
gem install susyWith all the main installs out the way we can now begin creating and configuring the workflow and adding any additional plugins that might vary from project to project. For this project I will be working in a WordPress theme folder so the project root will be:
/my-site-name/wp-content/themes/my-project-nameWithin this folder I’ll use the
_sass>
folder to house SASS files which will be compiled and output to the js
and css
folders.
First up lets create a package.json file to install the plugins and extensions we need for this specific workflow. The package.json file also serves as a useful list of dependencies that our project requires which will save heaps of time when re-creating this workflow on other similar projects, or for sharing projects with others.
So create a package.json file in the root folder of your project with the following content:
{
"name" : "willynilly-sass",
"version" : "0.0.1",
"dependencies" : {
"grunt" : "~0.4.5",
"grunt-contrib-connect" : "0.11.2",
"grunt-contrib-watch" : "~0.5.3",
"grunt-contrib-compass" : "~0.5.0",
"grunt-contrib-uglify" : "~0.2.7",
"matchdep" : "~0.1.2"
}
}
For the purpose of this guide I’m not going to go in to much detail on the utilities and their associated options, but here’s a brief overview of the functionality they add to the project:
grunt – our task manager
grunt-contrib-connect – adds live reloading to the browser
grunt-contrib-watch – monitors files and directories for changes
grunt-contrib-compass – adds the compass library
grunt-contrib-uglify – mjinifies JS files
matchdep – filters node.js dependencies, which are in the package.json file
(Note: it would be nice to embed these as comments in the package file, however comments can’t be used in json files.)
Once you’ve created the file head back to the terminal and navigate to the root folder of the project where your package.json file resides and run the following command:
npm installIf all goes well you should see the installation notifications:
![npm-install](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/npm-install.jpg)
node_modules
folder will be added to your project:
![node-modules](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/node-modules.jpg)
gruntfile.js
with the following content:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.initConfig({
uglify: {
my_target: {
files: {
'/js/script.js': ['_sass/js/*.js']
} //files
} //my_target
}, //uglify
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} //dev
}, //compass
connect: {
server: {
options: {
hostname: 'localhost',
port: 9000,
livereload: true
}
}
},
watch: {
options: { livereload: true },
scripts: {
files: ['_sass/js/*.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_sass/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html']
}
} //watch
}) //initConfig
grunt.registerTask('default', ['connect', 'watch']);
} //exports
This is a standard JS file so I have included some brief comments to describe what’s going on – there is of course plenty more functionality and options you could add here, but this is enough to get you started.
As you will note above there is a Ruby configuration file (config.rb) which includes configuration details of our compass project, so lets create that and we’re almost done.
In the root of your project create the file config.rb
with the following content:
require "susy"
css_dir = 'css'
sass_dir = '_sass/sass'
javascripts_dir = 'js'
output_style = : compressed
relative_assets = true
This just tells Compass where everything lives…and with that our basic workflow is complete!
To test it out navigate to the root folder of your project in the terminal and run the grunt
command you should see the connect and watch tasks fire up:
![grunt-watching](https://www.absolutewillynilly.com/wp-content/uploads/useless-knowledge/grunt-watching.jpg)
![compass-config](https://www.absolutewillynilly.com/wp-content/uploads/web-development/compass-config.jpg)
http://localhost:9000/
Categorised in: Web Development
This post was written by WillyNilly