Wednesday, November 9, 2011

Going to Compass

A new home page for me, myself, and I, is posted at http://mitch.amiano.agilemarkup.com .

After playing with some ideas about a canvas toy and Javascript managed page, I decided to stop screwing around with it. There is still a "play" page, for silly toys, but the rest of the site uses good-old, straightforward HTML5 content and CSS3.

The intent wasn't to do anything too flashy (as if I'm capable of being that flashy), but to at least show off some of the technologies I use or have used, and to put out a general call to action (hire me!)

After putting up a few more pages I realized I'd be wasting a lot of time futzing around with the CSS rules. The problem isn't one of mere file organization, but of the brutally redundant information spread among the style rules themselves, and the interdependencies among the rules. 

A common software technique for managing increasing complexity is to modularize. Yet CSS provides no meaningful modularization mechanisms.  Splitting style rules into separate .css files is a trivial, almost valueless, proposition, because the cost of keeping up with which rule is (or is not, or should be, or should not be) in which file overwhelms any benefit from separating the rules appropriate to each page.  The problem of repetition of semantic-less constants and interaction among rules also still remains.  

Managing style rules as CSS syntax in files, even with an IDE, is a waste of time. Yes, people pay for it, but it is still time wasted. We can be cleverer than that. 

Compass, or more precisely, SASS, provides a meaningful modularization and refactoring syntax layer. SASS is a kind of algebra for CSS, allowing you to identify patterns and factor out common variables. Compass is the tool that makes it feasible to use. 

First step: get Ruby. Since OSX runs my development machine, and I use RVM to manage the scripting engines and gem components for development, I've already got Ruby. But I do need to chose which Ruby and gemset I'll use:

cd ~/workspace/mitch.amiano.agilemarkup.com

rvm gemset create agilemarkup
echo "rvm use ruby-1.9.2@agilemarkup" >.rvmrc

Next step: get Compass. I tend not to like it when components for one project pollutes another project, and hate the hassle of manually figuring out component dependencies, so I'm going to use Bundler to make the gem dependency explicit:

cat < Gemfile
source 'http://rubygems.org'
gem 'compass'
EOT
bundle

Running bundle will fetch the Compass gem and any other gem component dependencies needed to use Compas' features.

Now, Gemfile and .rvmrc are specifications of the toolchain that supports the publishing process. Those are pretty high value bits, so they should be version controlled. I use GIT, so yeah, that's easy:

echo "Gemfile.lock" >> .gitignore
git add Gemfile .rvmrc .gitignore
git commit -m "add Compass to manage stylesheets"


The Compass gem installed, it is time to set up the basic framework of files in the working tree:

cd .. 
compass create mitch.amiano.agilemarkup.com

cd mitch.amiano.agilemarkup.com

There is a load of stuff created:
directory mitch.amiano.agilemarkup.com/sass/
directory mitch.amiano.agilemarkup.com/stylesheets/
   create mitch.amiano.agilemarkup.com/config.rb 
   create mitch.amiano.agilemarkup.com/sass/screen.scss 
   create mitch.amiano.agilemarkup.com/sass/print.scss 
   create mitch.amiano.agilemarkup.com/sass/ie.scss 
   create mitch.amiano.agilemarkup.com/stylesheets/ie.css 
   create mitch.amiano.agilemarkup.com/stylesheets/print.css 
   create mitch.amiano.agilemarkup.com/stylesheets/screen.css 

Finally, get Compass to watch the directories and process any SASS files that change:

compass watch & 

That's it! I'm all set for refactoring my stylesheets.
Post a Comment