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

closes #572

Browse Source
This commit is contained in:
Scott Davis 2011-11-04 09:42:35 -04:00
parent dc878a16a0
commit 57f35d477a
2 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss
View File

@ -28,29 +28,52 @@ $sprite-image-default-height: $sprite-default-size !default;
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
@include sprite-background($img, $width, $height);
@include sprite-position($col, $row, $width, $height, $margin); }
@include sprite-position($col, $row, $width, $height, $margin);
}
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
@include sprite-background-rectangle($img, $width, $height); }
@include sprite-background-rectangle($img, $width, $height);
}
// Sets rules common for all sprites, assumes a rectangular region.
@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
background: image-url($img) no-repeat;
width: $width;
height: $height;
overflow: hidden; }
overflow: hidden;
}
// Allows horizontal sprite positioning optimized for a single row of sprites.
@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
@include sprite-position($col, 1, $width, 0px, $margin); }
@include sprite-position($col, 1, $width, 0px, $margin);
}
// Allows vertical sprite positioning optimized for a single column of sprites.
@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
@include sprite-position(1, $row, 0px, $height, $margin); }
@include sprite-position(1, $row, 0px, $height, $margin);
}
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
$x: ($col - 1) * -$width - ($col - 1) * $margin;
$y: ($row - 1) * -$height - ($row - 1) * $margin;
background-position: $x $y; }
background-position: $x $y;
}
// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
@include hide-text;
@include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
background-image: $map;
background-repeat: no-repeat;
}
// Similar to 'replace-text-with-dimensions' but with sprites
// To use, create your sprite and then pass it in the `$map` param
// The name of the image in the sprite folder should be `$img-name`
@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){
@include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
}

34
test/integrations/sprites_test.rb
View File

@ -754,5 +754,39 @@ class SpritesTest < Test::Unit::TestCase
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
it "should replace text with images and dimensions using sprites" do
css = render <<-SCSS
@import "colors/*.png";
.blue {
@include sprite-replace-text($colors-sprites, blue);
}
.yellow {
@include sprite-replace-text-with-dimensions($colors-sprites, yellow);
}
SCSS
other_css = <<-CSS
.colors-sprite {
background:url('/colors-s58671cb5bb.png') no-repeat;
}
.blue {
text-indent:-119988px;
overflow:hidden;
text-align:left;
background-position:0 0;
background-image:url('/colors-s58671cb5bb.png');
background-repeat:no-repeat;}
.yellow {
text-indent:-119988px;
overflow:hidden;
text-align:left;
background-position:0 -10px;
height:10px;
width:10px;
background-image:url('/colors-s58671cb5bb.png');
background-repeat:no-repeat;
}
CSS
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
end