github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactored sprite selectors

Browse Source
This commit is contained in:
Scott Davis 2011-03-28 17:08:53 -04:00
parent 638e7e2c51
commit 7571d4af93
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile.lock
View File

@ -7,7 +7,7 @@ GIT
PATH
remote: .
specs:
compass (0.11.beta.4.b0bfb63)
compass (0.11.beta.4.29656ea)
chunky_png (~> 1.1.0)
sass (>= 3.1.0.alpha.249)

8
frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss
View File

@ -22,16 +22,17 @@
@if $dimensions {
@include sprite-dimensions($map, $sprite);
}
@include sprite-selectors($map, $sprite, $sprite);
}
// 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) {
@each $selector in $sprite-selectors {
@if sprite_has_selector($map, $sprite-name, $selector) {
.#{$full-sprite-name}:#{$selector}, .#{$full-sprite-name}_#{$selector}, .#{$full-sprite-name}-#{$selector} {
@include sprite($map, "#{$sprite-name}_#{$selector}");
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
}
}
}
@ -51,7 +52,6 @@
@if $base-class { @extend #{$base-class}; }
@include sprite($map, $sprite-name, $dimensions);
}
@include sprite_selectors($map, $sprite-name, $full-sprite-name);
}
}
}

34
spec/sprites_spec.rb
View File

@ -480,16 +480,40 @@ describe Compass::Sprites do
.selectors-ten-by-ten {
background-position: 0 0;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten_hover, .selectors-ten-by-ten-hover {
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
background-position: 0 -20px;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten_target, .selectors-ten-by-ten-target {
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
background-position: 0 -30px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
background-position: 0 -10px;
}
CSS
end
.selectors-ten-by-ten:active, .selectors-ten-by-ten_active, .selectors-ten-by-ten-active {
it "should render corret sprite with css selectors via magic mixin" do
css = render <<-SCSS
@import "selectors/*.png";
a {
@include selectors_sprite(ten-by-ten)
}
SCSS
css.should == <<-CSS
.selectors-sprite, a {
background: url('/selectors-edfef809e2.png') no-repeat;
}
a {
background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
background-position: 0 -20px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
background-position: 0 -30px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
background-position: 0 -10px;
}
CSS