.content_box
But half the joy of Haml comes from using its excellent stylesheet engine, Sass. Sass adds a powerful abstraction layer on top of CSS, letting you use constant variables and simple expressions, and handling a lot of nested selector drudgery. It really feels like magic to use:.storyteller_summary
:width 300px
:margin= 0 !one_gutter 0.25em 0
:float left
:clear left
.storyteller_photo
:float left
a
img.photo
:float left
:margin= 0 !half_gutter !half_gutter 0
becomes
Which is a beautiful thing. Recently I hired an excellent designer from elance.com to redesign this blog; while I can't say I executed her design perfectly, I got pretty close, and it really helped to use Sass in standalone mode. I had been using it exclusively as a Rails plugin, but as a gem it performs great as well. I wrote this little helper script to handle the transformation:
.storyteller_summary {
width: 300px;
margin: 0 10px 0.25em 0;
float: left;
clear: left; }
.storyteller_summary .storyteller_photo {
float: left; }
.storyteller_summary .storyteller_photo a img.photo {
float: left;
margin: 0 5px 5px 0; }
.storyteller_summary p {
margin: 0 10px 0.25em 0px; }
.storyteller_summary p .block_description {
display: block;
margin: 0;
padding: 0; }
.storyteller_summary p .inline_description {
display: inline; }
.storyteller_summary p a.audio_icon img {
display: inline;
float: none;
margin: 0;
padding: 0; }
.storyteller_summary p strong {
margin: 0; }
#!/usr/local/bin/ruby
gem 'haml'
template = IO.read('subelsky.sass')
open('subelsky.css','w+') {|file| file.write(Sass::Engine.new(template).render) }