Any Compass-based project I've worked on had a config.rb where you set your Compass options (or in the case of Rails, config/compass.rb). In a new, bare-bones Yeoman project however, there's no such file. Instead, Yeoman uses Grunt to set the options for the Compass compiler.
How Yeoman Sets Compass Options
The default settings for Compass looks like this:
compass: {
dist: {
options: {
css_dir: 'temp/styles',
sass_dir: 'app/styles',
images_dir: 'app/images',
javascripts_dir: 'temp/scripts',
force: true
}
}
},
Those options should look familiar: they're the same options used to configure Compass projects the world over.
Our Solution
The option require is what we're looking for in this case. Simply add it like so:
compass: {
dist: {
options: {
require: 'susy',
css_dir: 'temp/styles',
sass_dir: 'app/styles',
images_dir: 'app/images',
javascripts_dir: 'temp/scripts',
force: true
}
}
},
Now you can successfuly @import susy into your SASS files.
Caveats
Requiring Multiple Frameworks
One framework is good enough for me right now, but I'm sure other people want more than one. As of now, you're out of luck.
I installed the Fancy Buttons gem and tried:
require: 'susy fancy-buttons',require: ['susy','fancy-buttons'],
…and neither seem to work. You can't duplicate on object literals in Grunt so this doesn't work either:
require: 'susy',
require: 'fancy-buttons',
I have no idea how to include multiple frameworks as of right now, and would love it if someone could provide a solution.
UPDATE 2012-09-14 17:38:17: I figured out a decent approach: create a compass config file as you would for any other project, then tell Grunt where to get it with the config property. This means completely stripping most of the default options to this:
compass: {
dist: {
options: {
config: '.compass.rb', // I made it hidden because other Yeoman configs are hidden, too.
force: true
}
}
},
Your config file should use the settings Yeoman previously provided:
# Require any additional compass plugins here.
require 'fancy-buttons'
require 'susy'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "temp/styles"
sass_dir = "app/styles"
images_dir = "app/images"
javascripts_dir = "app/scripts/vendor"
This isn't a hack or really that clever. Gruntfile.js is merely providing settings to pass along to the Compass compiler when Yeoman wants to run it. One of the flags for the compass command is --config, after which you specify what config file you want to use.
Notice that I changed javascripts_dir from tmp/scripts to app/scripts/vendor. I believe this is a better setting since javascripts_dir is mainly used for one-off framework installs like this. I already filed a bug about it.
Installing Framework Assets
Some frameworks will require an installation step to copy over assets into your project. compass install fancy-buttons myProject -r fancy-buttons, for example, will copy over button_bg.png to your images directory.
To install these assets into your Yeoman project, you must run the compass install command but also specify the location of the css, sass, image, and javascript directories so they align with Yeoman's conventions.
No big deal. You only need to do this once:
compass install fancy-buttons . -r fancy-buttons --sass-dir 'app/styles' --css-dir 'temp/styles' --images-dir 'app/images' --javascripts-dir 'app/scripts/vendor'
And away we go.