diff --git a/Gemfile.lock b/Gemfile.lock index 8a332a1a..1a8ba66c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,7 +7,7 @@ GIT PATH remote: . specs: - compass (0.11.beta.3.3272dc7) + compass (0.11.beta.4.e47fccd) chunky_png (~> 1.1.0) sass (>= 3.1.0.alpha.249) diff --git a/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss b/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss index 650431c5..002419f8 100644 --- a/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss +++ b/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss @@ -34,6 +34,21 @@ @each $sprite-name in $sprite-names { $full-sprite-name: if($prefix and $prefix != "", "#{$prefix}-#{$sprite-name}", $sprite-name); .#{$full-sprite-name} { + @if sprite_has_hover($map, $sprite-name) { + &:hover { + @include sprite($map, "#{$sprite-name}_hover") + } + } + @if sprite_has_target($map, $sprite-name) { + &:target { + @include sprite($map, "#{$sprite-name}_target") + } + } + @if sprite_has_active($map, $sprite-name) { + &:active { + @include sprite($map, "#{$sprite-name}_active") + } + } @if $base-class { @extend #{$base-class}; } @include sprite($map, $sprite-name, $dimensions); } diff --git a/lib/compass/sass_extensions/functions/sprites.rb b/lib/compass/sass_extensions/functions/sprites.rb index ba40afd0..9b3637c9 100644 --- a/lib/compass/sass_extensions/functions/sprites.rb +++ b/lib/compass/sass_extensions/functions/sprites.rb @@ -34,9 +34,7 @@ module Compass::SassExtensions::Functions::Sprites # # background: url('/images/icons.png?12345678') 0 -24px no-repeat; def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO) - unless map.is_a?(Compass::SassExtensions::Sprites::Base) - missing_sprite!("sprite") - end + verify_map(map) unless sprite.is_a?(Sass::Script::String) raise Sass::SyntaxError, %Q(The second argument to sprite() must be a sprite name. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.) end @@ -51,18 +49,15 @@ module Compass::SassExtensions::Functions::Sprites # Returns the name of a sprite map # The name is derived from the folder than contains the sprites. def sprite_map_name(map) - unless map.is_a?(Compass::SassExtensions::Sprites::Base) - missing_sprite!("sprite-map-name") - end + verify_map(map, "sprite-map-name") Sass::Script::String.new(map.name) end Sass::Script::Functions.declare :sprite_name, [:sprite] # Returns the path to the original image file for the sprite with the given name def sprite_file(map, sprite) - unless map.is_a?(Compass::SassExtensions::Sprites::Base) - missing_sprite!("sprite-file") - end + verify_map(map, "sprite") + verify_sprite(sprite) if image = map.image_for(sprite.value) Sass::Script::String.new(image.relative_file) else @@ -71,11 +66,37 @@ module Compass::SassExtensions::Functions::Sprites end Sass::Script::Functions.declare :sprite_file, [:map, :sprite] + # Returns boolean is sprite image has a hover selector + def sprite_has_hover(map, sprite) + verify_map(map) + verify_sprite(sprite) + Sass::Script::Bool.new map.has_hover?(sprite) + end + + Sass::Script::Functions.declare :sprite_has_hover, [:map, :sprite] + + # Returns boolean is sprite image has a target selector + def sprite_has_target(map, sprite) + verify_map(map) + verify_sprite(sprite) + Sass::Script::Bool.new map.has_target?(sprite) + end + + Sass::Script::Functions.declare :sprite_has_target, [:map, :sprite] + + # Returns boolean is sprite image has a active selector + def sprite_has_active(map, sprite) + verify_map(map) + verify_sprite(sprite) + Sass::Script::Bool.new map.has_active?(sprite) + end + + Sass::Script::Functions.declare :sprite_has_active, [:map, :sprite] + + # Returns a url to the sprite image. def sprite_url(map) - unless map.is_a?(Compass::SassExtensions::Sprites::Base) - missing_sprite!("sprite-url") - end + verify_map(map, "sprite-url") map.generate image_url(Sass::Script::String.new("#{map.path}-#{map.uniqueness_hash}.png"), Sass::Script::Bool.new(false), @@ -103,9 +124,7 @@ module Compass::SassExtensions::Functions::Sprites # # background-position: 3px -36px; def sprite_position(map, sprite = nil, offset_x = ZERO, offset_y = ZERO) - unless map.is_a?(Compass::SassExtensions::Sprites::Base) - missing_sprite!("sprite-position") - end + verify_map(map, "sprite-position") unless sprite && sprite.is_a?(Sass::Script::String) raise Sass::SyntaxError, %Q(The second argument to sprite-position must be a sprite name. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.) end @@ -134,6 +153,18 @@ module Compass::SassExtensions::Functions::Sprites protected + def verify_map(map, error = "sprite") + unless map.is_a?(Compass::SassExtensions::Sprites::Base) + missing_sprite!(error) + end + end + + def verify_sprite(sprite) + unless sprite.is_a?(Sass::Script::String) + raise Sass::SyntaxError, %Q(The second argument to sprite() must be a sprite name. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.) + end + end + def missing_image!(map, sprite) raise Sass::SyntaxError, "No sprite called #{sprite} found in sprite map #{map.path}/#{map.name}. Did you mean one of: #{map.sprite_names.join(", ")}" end diff --git a/spec/sprites_spec.rb b/spec/sprites_spec.rb index d8944c03..e31a3e68 100644 --- a/spec/sprites_spec.rb +++ b/spec/sprites_spec.rb @@ -467,4 +467,41 @@ describe Compass::Sprites do CSS end -end \ No newline at end of file + it "should render corret sprite with css selectors via issue#248" do + css = render <<-SCSS + @import "selectors/*.png"; + @include all-selectors-sprites; + SCSS + css.should == <<-CSS + .selectors-sprite, .selectors-ten-by-ten, .selectors-ten-by-ten_active, .selectors-ten-by-ten_hover, .selectors-ten-by-ten_target { + background: url('/selectors-edfef809e2.png') no-repeat; + } + + .selectors-ten-by-ten { + background-position: 0 0; + } + .selectors-ten-by-ten:hover { + background-position: 0 -20px; + } + .selectors-ten-by-ten:target { + background-position: 0 -30px; + } + .selectors-ten-by-ten:active { + background-position: 0 -10px; + } + + .selectors-ten-by-ten_active { + background-position: 0 -10px; + } + + .selectors-ten-by-ten_hover { + background-position: 0 -20px; + } + + .selectors-ten-by-ten_target { + background-position: 0 -30px; + } + CSS + end + +end