I finally installed the Compass app to help me this my CSS generation. At first I was a bit resistant to the whole SCSS idea thinking I would have to learn something new which would just slow me down. But using SCSS and compass is really easy!

I took the plunge when faced with a project that used different colors for fonts and  backgrounds depending on what pages was displayed. It also has a variety of font stacks (font families). What could be more efficient than using mixins  in this situation to easily set the correct styles? I also really appreciate the fact that I can nest selectors so I don’t have the keep repeating myself, making creating the stylesheet actually faster!

I had to do a bit of setup to get this all working smoothly as use Dreamweaver (code mode only) as my editor and wanted it to handle SCSS like it does CSS. I followed this advice which worked perfectly . And, since I am using the Compass app, and was creating WordPress custom theme, I did not want to keep copying the generating style sheet to the usual WordPress directory. The following code allows my WordPress site to use a different stylesheet path:

add_filter('stylesheet_uri','schwartzbros_stylesheet_uri',10,2);

function schwartzbros_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){

return $stylesheet_dir_uri.'/restaurant-sass/stylesheets/style.css';
}

Want to learn more about SCSS and Compass? Check out the Compass documentation.