Fixes #449. Accept and honor offsets in selectors

This commit is contained in:
Caged 2011-07-02 13:27:32 -07:00
parent 2124003550
commit a08d0319d0
5 changed files with 39 additions and 13 deletions

View File

@ -7,7 +7,7 @@ GIT
PATH PATH
remote: . remote: .
specs: specs:
compass (0.11.3.rails.0.dfb7c70) compass (0.11.3.rails.0.2124003)
chunky_png (~> 1.2) chunky_png (~> 1.2)
fssm (>= 0.2.7) fssm (>= 0.2.7)
sass (~> 3.1) sass (~> 3.1)

View File

@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default;
@include sprite-dimensions($map, $sprite); @include sprite-dimensions($map, $sprite);
} }
@if not $disable-magic-sprite-selectors { @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 // Include the selectors for the `$sprite` given the `$map` and the
// `$full-sprite-name` // `$full-sprite-name`
// @private // @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 { @each $selector in $sprite-selectors {
@if sprite_has_selector($map, $sprite-name, $selector) { @if sprite_has_selector($map, $sprite-name, $selector) {
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-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 a base class is provided, then each class will extend it.
// //
// If `$dimensions` is `true`, the sprite dimensions will specified. // 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 { @each $sprite-name in $sprite-names {
@if sprite_does_not_have_parent($map, $sprite-name) { @if sprite_does_not_have_parent($map, $sprite-name) {
$full-sprite-name: "#{$prefix}-#{$sprite-name}"; $full-sprite-name: "#{$prefix}-#{$sprite-name}";
.#{$full-sprite-name} { .#{$full-sprite-name} {
@if $base-class { @extend #{$base-class}; } @if $base-class { @extend #{$base-class}; }
@include sprite($map, $sprite-name, $dimensions); @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
} }
} }
} }

View File

@ -132,13 +132,13 @@ $#{name}-layout:vertical !default;
@include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y) @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)) { @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) @include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y)
} }
// Generates a class for each sprited image. // Generates a class for each sprited image.
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) { @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); @include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
} }
SCSS SCSS
end end

View File

@ -448,7 +448,7 @@ class SpritesTest < Test::Unit::TestCase
CSS CSS
end 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 css = render <<-SCSS
@import "selectors/*.png"; @import "selectors/*.png";
@include all-selectors-sprites; @include all-selectors-sprites;
@ -473,7 +473,32 @@ class SpritesTest < Test::Unit::TestCase
CSS CSS
end end
it "should render corret sprite with css selectors via magic mixin" do 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 correct sprite with css selectors via magic mixin" do
css = render <<-SCSS css = render <<-SCSS
@import "selectors/*.png"; @import "selectors/*.png";
a { a {
@ -500,6 +525,7 @@ class SpritesTest < Test::Unit::TestCase
CSS CSS
end end
it "should not render corret sprite with css selectors via magic mixin" do it "should not render corret sprite with css selectors via magic mixin" do
css = render <<-SCSS css = render <<-SCSS
@import "selectors/*.png"; @import "selectors/*.png";