Compass

Using Roots with compass is no special case, you only have to use the regular compass command. The first place you'd want to look is the Compass Documentation.

This is just an example on how to get the Foundation Gem and compass installed in Roots. (You obviously will need to have both compass and the foundation gems installed and rolling for this to work.)

First check-out the latest revision of the Roots theme from github (if you do this on an existing customized Roots folder. Now make sure you are in the root of the Roots and run the following command.

compass init --sass-dir sass --css-dir css/foundation --images-dir img --javascripts-dir js/foundation -r ZURB-foundation --using ZURB-foundation --force

it does the following actions (this is a copy of what's printed on the screen after running the command, don't try to run this as commands):

directory img/misc/ 
directory img/orbit/ 
   create config.rb 
   create sass/app.scss 
   create sass/ie.scss 
overwrite js/foundation/app.js 
identical js/foundation/forms.jquery.js 
overwrite js/foundation/jquery.customforms.js 
   create js/foundation/jquery.min.js 
overwrite js/foundation/jquery.reveal.js 
overwrite js/foundation/jquery.orbit-1.3.0.js 
identical js/foundation/jquery.placeholder.min.js 
   create index.html 
   create humans.txt 
   create robots.txt 
   create MIT-LICENSE.txt 
   create img/misc/button-gloss.png 
   create img/misc/button-overlay.png 
   create img/misc/custom-form-sprites.png 
   create img/misc/input-bg.png 
   create img/misc/modal-gloss.png 
   create img/misc/table-sorter.png 
   create img/orbit/bullets.jpg 
   create img/orbit/left-arrow.png 
   create img/orbit/loading.gif 
   create img/orbit/mask-black.png 
   create img/orbit/pause-black.png 
   create img/orbit/right-arrow.png 
   create img/orbit/rotator-black.png 
   create img/orbit/timer-black.png 
   remove css/foundation/app.css 
   remove css/foundation/ie.css 
   create css/foundation/app.css 
   create css/foundation/ie.css 

Now we can remove the not required files.

rm index.html humans.txt robots.txt js/foundation/jquery.min.js css/foundation/forms.css css/foundation/globals.css css/foundation/grid.css css/foundation/mobile.css css/foundation/orbit.css css/foundation/reveal.css css/foundation/typography.css css/foundation/ui.css

And finally edit the inc/roots-actions.php file and comment line 151 to 158.

 150     case 'foundation' :
 151       /*$styles .= stylesheet_link_tag('/foundation/globals.css');
 152       $styles .= stylesheet_link_tag('/foundation/typography.css', 1);
 153       $styles .= stylesheet_link_tag('/foundation/grid.css', 1);
 154       $styles .= stylesheet_link_tag('/foundation/ui.css', 1);
 155       $styles .= stylesheet_link_tag('/foundation/forms.css', 1);
 156       $styles .= stylesheet_link_tag('/foundation/orbit.css', 1);
 157       $styles .= stylesheet_link_tag('/foundation/reveal.css', 1);
 158       $styles .= stylesheet_link_tag('/foundation/mobile.css', 1);*/
 159       $styles .= stylesheet_link_tag('/foundation/app.css', 1);
 160       break;
 161     case 'less' :

You can now run the compass watch command in the Roots folder and edit the sass/app.css file.

NB: This is an early documentation, if you find anything that breaks with those steps please update this page accordingly.