Sass functions and mixins to inline images and get images size:
.icon
+image-size("icon.png")
background: inline("icon.png")
.icon-wrap
width: image-width("icon.png") + 6px
height: image-height("icon.png")
with HiDPI (Retina) support:
.icon
+hidpi-inline("icon.png")
.background
+hidpi-image("big-image.jpg")
and fonts support:
@font-face
font-family: "MyFont"
src: inline("my.woff") format('woff')
Features
Instead of Compass, Rails Sass Images has:
- HiDPI (Retina) support.
- Full Assets Pipeline support.
- Useful shortcuts.
- More file types support.
- Smaller and cleaner code.
If you still need Compass for CSS 3 prefixes, see Autoprefixer.
Usage
Ruby on Rails
Add gem to your Rails Gemfile
:
gem "rails-sass-images"
and import mixins in your application.sass
:
@import "rails-sass-images"
Sprockets
You can use Rails Sass Images with plain Ruby application with Sprockets. Just install in to Sprockets environment:
require 'rails-sass-images'
RailsSassImages.install(sprockets_env)
and import mixins in your Sass files:
@import "rails-sass-images"
Other
You can use Rails Sass Images without Sprockets. Just set dir to load assets:
require 'rails-sass-images'
RailsSassImages.load_from = './images/'
By default, load dir will be current dir .
.