Include images as Inline in sass without Compass?

Question

I want to add images as base64 in sass. I have been locking at Compass but it feels way to bulky and really not what I'm looking for. Is there a good way to include images or other files inline in css without using compass?

Answer 1

If you use grunt, you can just use the grunt-data-uri task in order to achieve the conversation of regular url() string to base64.

        dataUri: {
           dist: {
              src: ['dist/styles/*.css'],
              dest: 'dist/styles/',
              options: {
                target: [
                    'img/low-res/embeded/*.*'
                ],
                fixDirLevel: true
              }
          }
       },

Essentially, the task will look for every images contained inside the embeded folder in your .css. From there, it will convert the url() into base64.

Answer 2

Compass is Open Source, just get the part of the code that suit you.

Here is the ruby source on Github