Web Development

Rails has been doing a fantastic job being at the top when it comes to new innovations. The latest is have default turbolinks which makes it faster for sites to reload. With turbolinks, only the body and title without having the need to reload your stylesheets. Isn’t it amazing?

Anyway, with new things comes new ways to doing things. In Rails 4, referencing assets in stylesheets are different now.

Using Image Assets

When adding an image background:

.div-with-image: {
  background: image-url('background.png');
}

The CSS would return something like this:

.div-with-image: {
  background: url('background.png');
}

Using Image Data

.div-with-image: {
  background: asset-data-url('background.png');
}

This particular function would return a url reference to the Base64-encoded asset at the specified path.

.div-with-image: {
  background: url(data:image/jpeg;base64,%2F9j....)
}

Generic Asset

.div-with-image: {
  asset-url('background.png', image);
}

This particular helper is useful for any asset, not just for images. This may include image, font, video, audio, javascript or stylesheets:

.div-with-image: {
  background: url('background.png');
}

Now, you can use these asset helpers to your own satisfaction.