Here follows my quick and dirty notes on integrating Nanoc3 and Compass.

Nanoc3 is a static site generator, and Compass is a stylesheet authoring framework. And if you don’t know what they are, then you’re probably not going to find the following very useful.

Create a new site

For this quick tutorial, I’m going to assume you want to create a new site - just in case you accidently destroy an existing one.

nanoc3 create_site compass_tutorial

Compass configuration

Create the file compass_tutorial/config.rb and enter the following code:

http_path    = "/" 
project_path = "." 
css_dir      = "output/stylesheets/" 
sass_dir     = "content/stylesheets/" 
images_dir   = "output/images/"

sass_options = {
  :syntax => :scss
}

Rules

Open compass_tutorial/Rules and add the following to the top:

require 'compass'
Compass.add_project_configuration 'config.rb'

Remove the existing compile rule for the stylesheets folder and add the following:

compile '/stylesheets/*' do
  filter :sass, Compass.sass_engine_options
end

Remove the existing routing rule for the stylesheets folder and add the following:

route '/stylesheets/*' do
  item.identifier.chop + '.css'
end

Initialise Compass

Within the compass_tutorial folder run the following command:

compass install blueprint

This will install the Blueprint CSS framework within Compass. We’ve already created the Compass configuration manually, so we don’t need to run the create command.

Modify the default layout layouts/default.html.

Remove the following line:

<link rel="stylesheet" type="text/css" href="/style.css"
media="screen">

And add the following:

<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
  <link href="/output/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->

Compile and view

You can now compile your site:

nanoc3 co

Host it by running WEBrick:

nanoc3 view

And then view it using your favourite web browser by going to the following URL:

http://localhost:3000/

And that’s it, not much more here.