Using Sass

Prerequisites

Ruby

• Download the Windows Ruby Installer.
• Make sure to add the path to the Ruby bin directory to the global Windows Path variable.

Compass

From the Compass Documentation:

$ gem update --system
$ gem install compass

Installing Compass will also install Sass, since it is a dependency for Compass.

Creating a Compass project

It's actually not that practical to follow the examples which assume that a project directory doesn't exist prior to starting out with Compass:

$ compass create <project_name>

What that command does is create a root directory for the website and place a configuration file (/config.rb), a directory for Sass files (/sass), and a destination directory for compiles CSS files (/stylesheets).

The locations of the Sass directory and CSS directory can be changed within the config.rb configuration file.

In most cases the web root directory already exists. In that case navigate to it, and:

$ compass init

Like compass create this creates a configuration file, a Sass directory, and a CSS directory. But it doesn't create the project directory.

Working with the project

Directory structure

The Sass Way: How to Structure a Sass Project

NB I have started to settle on a slightly different model for naming the directories. The information below is outdated.

sass/
|
|-- modules/
|   |
|   |-- _all.scss        # common includes
|   |-- _utility.scss    # module name
|   |-- _colors.scss     # Etc.
|   ...
|
|-- partials/
|   |
|   |-- _base.scss       # imports for all mixins + global project variables
|   |-- _buttons.scss    # buttons
|   |-- _framework.scss  # framework
|   |-- _grid.scss       # grid
|   |-- _text.scss       # text
|   ...
|
|-- vendors/             # CSS or Sass from other projects
|   |
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
|-- main.scss

• The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.
• The partials directory is where the meat of my CSS is constructed.
• The vendors directory is for third-party CSS.

Compiling

Manually

To compile all .scss files in the sass directory:

$ compass compile

To compile a specific .scss file :

$ compass compile sass/myfile.scss

In the background

• Requires Grunt.js

Configuring Grunt.js

• /gruntfile.js:

module.exports = function (grunt) {

	grunt.initConfig({

		pkg: grunt.file.readJSON('package.json'),

		watch: {
			files: 'sass/**/*.scss',
			tasks: ['compass']
		},
		compass: {
			dist: {
				options: {
					config: "config.rb"
				}
			}
		}
	});

	/* loading npm tasks */
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.loadNpmTasks('grunt-contrib-watch');
};

The watch task watches the files specified with watch.files while it is running.

When any of those files are modified, it runs the task(s) specified with watch.tasks

Compass options can be set in compass.dist.options, or as in the example above, share them with a config.rb file with compass.dist.options.config.