Leitmotif

I like Compass a lot and I wanted to use it for WordPress themes. Chris Coyier has a great post about this and it works fine. There was just one thing. I use Compass for creating sprites. When Compass generates a sprite and an new css file, the paths to the images are wrong (for WordPress themes).

Even when using relative_assets = true the url contains the wrong relative path. This is because of the move action from the css folder to the root of the theme, which is done by the on_stylesheet_saved event handler in config.rb and because of the way you reference images from WordPress themes.

In order to get this right, I added a replace action to the Ruby script which fixes the url’s.

This is what my config.rb looks like:

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "script"
relative_assets = true
require 'fileutils'

on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "modifying sprite path in #{file}"
    css = File.read(file)
    File.open(file, 'w+') do |f|
      # remove the ../ in front of sprite images
      f << css.gsub('url('../images/', 'url('images/')
    end
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end