diff --git a/Gemfile.lock b/Gemfile.lock index ab6f3cba..5b86ed71 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,7 +7,7 @@ GIT PATH remote: . specs: - compass (0.11.3.rails.0.dfb7c70) + compass (0.11.3.rails.0.2124003) chunky_png (~> 1.2) fssm (>= 0.2.7) sass (~> 3.1) diff --git a/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss b/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss index c346e181..1b268a84 100644 --- a/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss +++ b/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss @@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default; @include sprite-dimensions($map, $sprite); } @if not $disable-magic-sprite-selectors { - @include sprite-selectors($map, $sprite, $sprite); + @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y); } } // Include the selectors for the `$sprite` given the `$map` and the // `$full-sprite-name` // @private -@mixin sprite-selectors($map, $sprite-name, $full-sprite-name) { +@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) { @each $selector in $sprite-selectors { @if sprite_has_selector($map, $sprite-name, $selector) { &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} { - @include sprite-background-position($map, "#{$sprite-name}_#{$selector}"); + @include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y); } } } @@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default; // If a base class is provided, then each class will extend it. // // If `$dimensions` is `true`, the sprite dimensions will specified. -@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map)) { +@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { @each $sprite-name in $sprite-names { @if sprite_does_not_have_parent($map, $sprite-name) { $full-sprite-name: "#{$prefix}-#{$sprite-name}"; .#{$full-sprite-name} { @if $base-class { @extend #{$base-class}; } - @include sprite($map, $sprite-name, $dimensions); + @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); } } } diff --git a/lib/compass/sass_extensions/functions/sprites.rb b/lib/compass/sass_extensions/functions/sprites.rb index 7639f4da..d006d3ee 100644 --- a/lib/compass/sass_extensions/functions/sprites.rb +++ b/lib/compass/sass_extensions/functions/sprites.rb @@ -34,7 +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) - sprite = convert_sprite_name(sprite) + sprite = convert_sprite_name(sprite) 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.) diff --git a/lib/compass/sprite_importer.rb b/lib/compass/sprite_importer.rb index d46403d9..1bda1162 100644 --- a/lib/compass/sprite_importer.rb +++ b/lib/compass/sprite_importer.rb @@ -132,13 +132,13 @@ $#{name}-layout:vertical !default; @include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y) } -@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) { - @include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix) +@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) { + @include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y) } // Generates a class for each sprited image. -@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) { - @include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix); +@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) { + @include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y); } SCSS end diff --git a/test/integrations/sprites_test.rb b/test/integrations/sprites_test.rb index 6f6834bd..9e69f703 100644 --- a/test/integrations/sprites_test.rb +++ b/test/integrations/sprites_test.rb @@ -448,7 +448,7 @@ class SpritesTest < Test::Unit::TestCase CSS end - it "should render corret sprite with css selectors via issue#248" do + it "should render correct sprite with css selectors via issue#248" do css = render <<-SCSS @import "selectors/*.png"; @include all-selectors-sprites; @@ -472,8 +472,33 @@ class SpritesTest < Test::Unit::TestCase } CSS end + + it "should honor offsets when rendering selectors via issue#449" do + css = render <<-SCSS + @import "selectors/*.png"; + @include all-selectors-sprites($offset-x: 20px, $offset-y: 20px); + SCSS + assert_correct css, <<-CSS + .selectors-sprite, .selectors-ten-by-ten { + background: url('/selectors-sedfef809e2.png') no-repeat; + } + + .selectors-ten-by-ten { + background-position: 20px 20px; + } + .selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover { + background-position: 20px 0; + } + .selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target { + background-position: 20px -10px; + } + .selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active { + background-position: 20px 10px; + } + CSS + end - it "should render corret sprite with css selectors via magic mixin" do + it "should render correct sprite with css selectors via magic mixin" do css = render <<-SCSS @import "selectors/*.png"; a { @@ -499,6 +524,7 @@ class SpritesTest < Test::Unit::TestCase } CSS end + it "should not render corret sprite with css selectors via magic mixin" do css = render <<-SCSS