Set up Node.js, Grunt and Node-Sass from scratch

Run the following steps inside a clean directory

Not sure if you are in the same boat as I, but I could not find any good resource out there that pulled this all together. So here is a step-by-step tutorial for creating a Node.js app from scratch, adding in Grunt and then Node-Sass. Yeah, try and find good docs on Node-Sass alone :(

Hope this is of help!

Create your Node.js project

Install Express

Install Grunt

Set up skeleton project framework

Get the app started

Install template language

Update the app.js file

Adding routes, make a home page

Install Grunt-Sass

Add Sass to the project

Create Gruntfile

Install Grunt Watch

Our desired file structure

    |- node_modules/
    |- public/
    |--- stylesheets/
    |- sass/
    |- views/

Get things running

Now that you have a bare bones project set up, we need to get things running. Typically I will be running three terminal windows/tabs for this.

Now you should be able to navigate to http://localhost:4000/ and see your project running.

Install a Sass framework

For this project I choose to use Thoughtbot's Bourbon library.

While this library is a Ruby Gem, this does not place a Ruby dependency on your project. The Gem installs a version of the Sass mixin library directly into your project.

Before installing the library, update your file structure to contain a lib/ directory within your sass/ directory.

|- node_modules/
|- public/
|--- stylesheets/
|- sass/
|--- lib/
|- views/

Let's install Bourbon.

Install UI foundational framework

Within the sass/ directory, we need to install a foundational directory framework to start constructing our site. I recommend the following:

|- _buttons.scss
|- _config.scss
|- _forms.scss
|- _modules.scss
|- _reset.scss
|- _typography.scss
|- _vendors.scss
|- application.scss
|- buttons/
|- colors/
|- forms/
|- layouts/
|- lib/
|- modules/
|- ui_patterns/
|- vendors/

In our application.scss file, we need to import a few files to get this started.

// App Config - this is where most of your magic will happen
// ---------------------------------------------------------
@import "config";  // Editing the config file sets the theme for the project

// Import core Sass libraries
// ---------------------------------------------------------
@import "lib/bourbon/bourbon";

// Standard CSS reset stuff here
// ---------------------------------------------------------
@import "reset";

The reset I have included in this project is a modified version of Eric Meyer's reset plus some ideas from the HTML5 reset project. Additionally I have updated this reset to be more Sass driven using variables.

Next add the individual Sass files that will make up the base, module, vendor and layout portions of the project

// Base
@import "typography";
@import "forms";
@import "buttons";

// UI Patterns and Modules
// State is addressed within the component code itself
@import "ui_patterns/manifest";
@import "modules/manifest";

// Vendor specific styles / modules
@import "vendors/manifest";

// Layouts
@import "layouts/manifest";

This will complete the initial set up of the bare bones project. From here you will be able to customize the Sass to fit the design of your project.