I ran into the error
undefined method 'top' for nil:NilClass while attempting to use the sprites feature of Compass in Wordpress. After a bit of digging through the Compass sources I found the solution.
The error you get is this:
If your settings are aren’t correct Compass will attempt to loop through a bunch of images (which it can’t find) and one of them is null thus the error. You are also likely to see this error:
I found the following to be true and important while configuring your project:
- All icons are relative to your images path and can’t be outside of it.
- You can’t sprite the images directly under images/. They must be a in subfolder such as images/icons.
- You can’t have your scss file(s) in the root directory (which I did for simplicity since I only had one file). Make a “sass” directory and put it in there.
- Make sure you are using relative assets in your config file, especially for Wordpress. Otherwise it creates an absolute path to the images which is a pain if it’s in a theme.
Here’s the final config I ended up with:
1 2 3 4 5 6
See this thread for more info.