Compass, SASS, CakePHP
I’ve learned to loathe CSS. As a developer with a lot of OOP experience, I love the intent, but I can’t endorse the implementation. Then, about a year ago, I found Compass and my grey skies became blue again or, at the very least, they became a whole lot less grey.
The point of this post isn’t to dive deep into either my hostility towards CSS, my newlywed love affair with Compass and SASS or even to spend a lot of time discussing the latter two. Rather, the point is to document how I configure a Ruby tool to play nice in a PHP code base, specifically a CakePHP code base. Since we’re making introductions, though, it’s worth touching on the highlights of the ecosystem. If CSS frustrates you on a regular basis, I’ll leave it to you to read on.
SASS (Syntactically Awesome Style Sheets)
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
As the acronym hints, SASS is essentially just an (awesome) alternate syntax that takes advantage of a “compilation” process to translate the alternate syntax into standard CSS. Baked into that compilation process, though, is a lot of power. Variables and mixins (think functions) right a lot of CSS wrongs.
Compass
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain.
I can’t improve on something as clear and concise as that so I won’t try. Compass includes an executable that provides some handy command line tools and offers a lot of plugins that port many of the popular CSS frameworks (e.g. Blueprint, 960gs, Susy, etc.) to SASS syntax.
As a quick example, rather than littering markup with non-semantic span-[number] classes in a site built on the Blueprint CSS framework, you can drop those classes and reference a mixin that creates the same effect. For a sidebar div that might get a class of span-4, drop the class and update your main definition instead:
#sidebar
+column( 4 )
Cleaner markup, improved semantics. Win-win.
Ruby
Since Compass and SASS have deep roots in the Ruby community, they may be easily overlooked by other developers. They shouldn’t be. While it’s true that Compass is written in Ruby and old-school SASS looks a bit like Ruby (the old syntax is still supported—I even prefer it—but the most recent syntax is more CSS-like), it compiles down to plain, old, ordinary CSS without all of the headaches of writing (or maintaining) it as CSS.
Because it compiles down to CSS, it can be used in any project written in any language that I can think of. I’ve used it in small, standalone PHP projects as well as framework-based projects using Symfony and CakePHP.
Compass and Cake
Since I prefer CakePHP, I’ll use that as the model, but the instructions should be easily extrapolated for any other language, structure or framework.
Before getting into Compass itself, here’s how the relevant directories of my CakePHP project directory are laid out:
<project root>
+ app
+ webroot
+ css
+ img
+ js
So let’s get started with Compass. If Compass isn’t already installed, just install it via its gem: gem install compass. That’s it. We’re going to deviate slightly from the instructions on the Compass homepage, so for the project creation & configuration, I’m going to ask you not to RTFM until we’re through here.
First, in your Terminal:
$ cd <project_root>
$ mkdir sass
$ cd sass
$ touch config.rb
This creates the top level directory for this project’s Compass framework files and an empty config file that will soon tell Compass how to do what it does. Here’s what my config.rb file contains for a CakePHP project:
http_path = "/"
sass_dir = 'src'
css_dir = '../app/webroot/css'
images_dir = '../app/webroot/img'
javascripts_dir = '../app/webroot/js'
http_stylesheets_path = 'css'
http_javascripts_path = 'js'
http_images_path = 'images'
environment = :development
output_style = :compressed
The config file tells Compass where everything belongs once the project is initialized. In short, I’m telling Compass to install the supporting SASS files in a child directory named src and also how to access CakePHP’s asset directories from the SASS root (e.g. <project_root>/sass).
The *_path variables tell Compass how to reference these assets via HTTP. An image, for example, would be referenced as /img/my_image.png.
The last two variables tell Compass something about the operating environment and how the compiled stylesheet should look. A “compressed” stylesheet contains the entire declaration for each selector on a single line. I’d never create CSS that way because I find it miserable to maintain, but since I won’t be maintaining any CSS, this is a nice space saver. Complete documentation of the config file is available on the Compass site.
All that’s left is to initialize the Compass project. You should already be in your sass/ directory, so:
$ compass install blueprint/semantic
Now you’re ready to go. You can compile your stylesheets manually whenever you’re ready to test in a browser, but it’s much less hassle to let Compass do all of that work for you. It will “watch” your project and compile each time you save a .sass (or .scss) file in that directory.
$ cd ..
$ compass watch sass
Start editing—and saving—your SASS files and you’ll see the terminal come alive with activity. Your plain old CSS files are being compiled and stored right where CakePHP expects them to be. Your days of writing and maintaining CSS are over.
