added sass functions to allow getting the unit value demensions of a sprite image

This commit is contained in:
Scott Davis 2011-10-25 16:14:46 -04:00
parent 16ff623732
commit ab20a7b9d1
3 changed files with 33 additions and 2 deletions

View File

@ -105,7 +105,7 @@ module Compass
# Generates the Sass for this sprite file
def self.content_for_images(uri, name, skip_overrides = false)
binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri))
binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri), :files => files(uri))
CONTENT_TEMPLATE.result(binder.get_binding)
end
end

View File

@ -23,7 +23,7 @@ $<%= name %>-layout:vertical !default;
<% end %>
$<%= name %>-sprites: sprite-map("<%= uri %>",
<% sprite_names.map do |sprite_name| %>
<% sprite_names.each do |sprite_name| %>
$<%= name %>-<%= sprite_name %>-position: $<%= name %>-<%= sprite_name %>-position,
$<%= name %>-<%= sprite_name %>-spacing: $<%= name %>-<%= sprite_name %>-spacing,
$<%= name %>-<%= sprite_name %>-repeat: $<%= name %>-<%= sprite_name %>-repeat,
@ -39,6 +39,14 @@ $<%= name %>-layout:vertical !default;
background: $<%= name %>-sprites no-repeat;
}
//sass functions to return the demensions of a sprite image as units
<% [:width, :height].each do |demension| %>
@function <%= name %>-sprite-<%= demension %>($name) {
$file: sprite_file($<%= name %>-sprites, $name);
@return image-<%= demension %>($file);
}
<% end %>
// Use this to set the dimensions of an element
// based on the size of the original image.
@mixin <%= name %>-sprite-dimensions($name) {

View File

@ -718,4 +718,27 @@ class SpritesTest < Test::Unit::TestCase
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
it "should allow use of demension functions" do
css = render <<-SCSS
@import "squares/*.png";
$h: squares-sprite-height(twenty-by-twenty);
$w: squares-sprite-width(twenty-by-twenty);
.div {
height:$h + 1px;
width:$w + 2px;
}
SCSS
other_css = <<-CSS
.squares-sprite {
background: url('/squares-sbbc18e2129.png') no-repeat;
}
.div {
height:21px;
width:22px;
}
CSS
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
end