compass-rgbapng.rb

require "rubygems"
require "base64"
require "haml"
require "chunky_png"

module Sass::Script::Functions
  
  def rgbapng(color)
    chunky_color = ChunkyPNG::Color.rgba(color.red, color.green, color.blue, (color.alpha * 100 * 2.55).round)
    image = ChunkyPNG::Image.new(1,1, chunky_color)
    file = ChunkyPNG::Color.to_hex(chunky_color).gsub(/\#/, "") + ".png";
    path = File.join(Compass.configuration.images_path, file);
    if !File.exists?(path) || options[:force]
      puts "Writing #{file}"
      image.save(path)
    end
    Sass::Script::String.new(file)
  end

  def rgbapng_inline(color)
    chunky_color = ChunkyPNG::Color.rgba(color.red, color.green, color.blue, (color.alpha * 100 * 2.55).round)
    image = ChunkyPNG::Image.new(1,1, chunky_color)
    data = Base64.encode64(image.to_blob).gsub("\n","")
    Sass::Script::String.new("url('data:image/png;base64,#{data}')")
  end
  
end

# Usage in a mixin.
#
# =rgba-background($color)
#   background: image_url(rgbapng($color))
#   background: $color
#
# Add mixin to a style.
#
# .block-region
#   +rgba-background(rgba(255, 255, 0, 0.7))
#
# Compiles to this CSS
#
# .block-region {
#   background: url('../images/rgbapng/ffff00b2.png?1272139839');
#   background: rgba(255, 255, 0, 0.7); }

# Inline usage
#
# .block-region
#   background: rgbapng_inline(rgba(255, 255, 0, 0.7))
#   background: rgba(255, 255, 0, 0.7)
#
# Compiles to:
#
# .block-region {
#   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABEAYAAABPhRjKAAAABmJLR0T/////AAC3fuUjAAAACXBIWXMAAABIAAAASABGyWs+AAAAEUlEQVQI12P4////fwaGzUYAG4cE4jr+6PkAAAAASUVORK5CYII=');
#   background: rgba(255, 255, 0, 0.7); }