The Changelog

Open Source moves fast. Keep up.

compass-magick: Extend Sass with power of ImageMagick

Compass delivers powerful features on top of Sass including support for CSS3 and image sprites. With Compass-Magick, Stan Angeloff pushes the envelope a bit and adds the power of ImageMagick (via RMagick), allowing you to create images for your stylesheets on the fly:

background: transparent magick-image('nav.png', 940px, 50px,
  magick-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),

In this example, the magick-image function creates an image with filename nav.png with a linear white gradient over blue background with top rounded corners. If a filename is not specified, the image is embedded directly into the stylesheet with data-uri.

Compass-Magick is a nifty way to dynamically create images to serve up for older browsers that do not support CSS3 rounded corners and gradients. Check out the Readme for a full list of functions and usage options.

[Source on GitHub]

Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.