Inlining Bootstrap SASS images with Compass

Question

A bit about environment: we do UI build automation with Grunt, we do use Twitter Bower for managing third-party dependencies, as we don't want to keep third-party code in our repository, we use Compass for CSS extension.

Currently making a compressed version of vendor assets into single CSS file and encountered a problem, that Compass doesn't transform somehow images to inline ones while build. We want all images to be inlined into resulting CSS file with Data URL (as long as we support browsers newer than IE9 =).

Master SCSS file including Bootstrap SASS looks like

// styles/main.scss
$iconSpritePath:      '../components/bootstrap-sass/img/glyphicons-halflings.png';
$iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png';
//..
@import "../components/bootstrap-sass/lib/bootstrap";

Compass command looks like

compass compile --css-dir target/compass/styles \
   --sass-dir app/styles --images-dir app/images --output-style expanded

Resulting output is like

// target/compass/styles/main.css
/* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  ...
  /* WANT THIS IMAGE INLINED */
  background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png");
  ...
}

So, main desire is to get all url() expressions to hold base64 encoded images inline. As an alternative, we can switch to LESS, if it provides this ability more easily. Actually, a good thing, because we'd eliminate dependency on Ruby/Compass and we'd be able to install everything with NPM

Answer 1

Just changed the variable for base path in bootstrap SASS main file. it helped.

Answer 2

try this

inline-image($image, $mime-type)

http://compass-style.org/reference/compass/helpers/inline-data/#inline-image

http://blog.derekperez.com/post/755676493/smarter-sprites-inline-image-function-with-sass

Multiple Background Images using Sass / Compass