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

Merge pull request #607 from chriseppstein/sprite_demensions

Browse Source 
Sprite demensions
This commit is contained in:
Scott Davis 2011-10-25 13:34:39 -07:00
commit 3a4c5c75dc
6 changed files with 160 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Gemfile.lock
View File

@ -1,7 +1,7 @@
PATH
remote: .
specs:
compass (0.12.alpha.0.8ede06f)
compass (0.12.alpha.0.a00044c)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)
@ -50,14 +50,14 @@ GEM
term-ansicolor (>= 1.0.6)
diff-lcs (1.1.3)
em-dir-watcher (0.9.4)
em-websocket (0.3.1)
em-websocket (0.3.5)
addressable (>= 2.1.1)
eventmachine (>= 0.12.9)
erubis (2.6.6)
abstract (>= 1.0.0)
eventmachine (0.12.10)
fssm (0.2.7)
gherkin (2.5.1)
gherkin (2.5.4)
json (>= 1.4.6)
haml (3.1.3)
i18n (0.5.0)
@ -72,7 +72,7 @@ GEM
mime-types (~> 1.16)
treetop (~> 1.4.8)
metaclass (0.0.1)
mime-types (1.16)
mime-types (1.17.1)
mocha (0.10.0)
metaclass (~> 0.0.1)
polyglot (0.3.2)
@ -95,9 +95,10 @@ GEM
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (~> 0.14.4)
rake (0.9.2)
rcov (0.9.10)
rdoc (3.9.4)
rake (0.9.2.2)
rcov (0.9.11)
rdoc (3.11)
json (~> 1.4)
rspec (2.0.1)
rspec-core (~> 2.0.1)
rspec-expectations (~> 2.0.1)
@ -111,14 +112,14 @@ GEM
ruby-json (1.1.2)
ruby-prof (0.10.8)
rubyzip (0.9.4)
sass (3.1.7)
term-ansicolor (1.0.6)
sass (3.1.10)
term-ansicolor (1.0.7)
thor (0.14.6)
timecop (0.3.5)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
tzinfo (0.3.29)
tzinfo (0.3.30)
PLATFORMS
ruby

30
doc-src/content/help/tutorials/spriting.markdown
View File

@ -62,6 +62,8 @@ is located within it.
<a name='nested-folders'></a>
## Nested Folders
****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
Example:
@ -72,6 +74,8 @@ Example:
<a name="selector-control"></a>
## Selector Control
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
If you want control over what selectors are generated, it is easy to do. In this example,
this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
on the name of the folder in which you've placed your icons.
@ -98,9 +102,35 @@ And your stylesheet will compile to:
.actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; }
<a name="sass_functions"></a>
## Sass Functions
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
Getting the image dimensions of a sprite
You can get a unit value by using the magical dimension functions `<map>-sprite-height` and `<map>-sprite-width`
If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
Example:
@import "icon/*.png";
$box-padding: 5px;
$height: icon-sprite-height(some_icon);
$width: icon-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
<a name="magic-imports"></a>
## Magic Imports
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
As noted above, compass will magically create sprite stylesheets for you. Some people like
magic, some people are scared by it, and others are curious about how the magic works. If
you would like to avoid the magic, you can use compass to generate an import for you. On the

86
lib/compass/sprite_importer.rb
View File

@ -1,8 +1,16 @@
require 'erb'
require 'compass/sprite_importer/binding'
module Compass
class SpriteImporter < Sass::Importers::Base
VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
VALID_EXTENSIONS = ['.png']
TEMPLATE_FOLDER = File.join(File.expand_path('../', __FILE__), 'sprite_importer')
CONTENT_TEMPLATE_FILE = File.join(TEMPLATE_FOLDER, 'content.erb')
CONTENT_TEMPLATE = ERB.new(File.read(CONTENT_TEMPLATE_FILE))
# finds all sprite files
def self.find_all_sprite_map_files(path)
@ -97,82 +105,8 @@ module Compass
# Generates the Sass for this sprite file
def self.content_for_images(uri, name, skip_overrides = false)
<<-SCSS
@import "compass/utilities/sprites/base";
// General Sprite Defaults
// You can override them before you import this file.
$#{name}-sprite-base-class: ".#{name}-sprite" !default;
$#{name}-sprite-dimensions: false !default;
$#{name}-position: 0% !default;
$#{name}-spacing: 0 !default;
$#{name}-repeat: no-repeat !default;
$#{name}-prefix: '' !default;
$#{name}-clean-up: true !default;
$#{name}-layout: vertical !default;
#{skip_overrides ? "$#{name}-sprites: sprite-map(\"#{uri}\", $layout: $#{name}-layout, $cleanup: $#{name}-clean-up);" : generate_overrides(uri, name) }
// All sprites should extend this class
// The #{name}-sprite mixin will do so for you.
\#{$#{name}-sprite-base-class} {
background: $#{name}-sprites no-repeat;
}
// Use this to set the dimensions of an element
// based on the size of the original image.
@mixin #{name}-sprite-dimensions($name) {
@include sprite-dimensions($#{name}-sprites, $name)
}
// Move the background position to display the sprite.
@mixin #{name}-sprite-position($name, $offset-x: 0, $offset-y: 0) {
@include sprite-background-position($#{name}-sprites, $name, $offset-x, $offset-y)
}
// Extends the sprite base class and set the background position for the desired sprite.
// It will also apply the image dimensions if $dimensions is true.
@mixin #{name}-sprite($name, $dimensions: $#{name}-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
@extend \#{$#{name}-sprite-base-class};
@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), $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), $offset-x: 0, $offset-y: 0) {
@include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
}
SCSS
end
# Generates the override defaults for this Sprite
# <tt>$#{name}-#{sprite_name}-position </tt>
# <tt> $#{name}-#{sprite_name}-spacing </tt>
# <tt> #{name}-#{sprite_name}-repeat: </tt>
def self.generate_overrides(uri, name)
sprites = sprite_names(uri)
content = <<-TXT
// These variables control the generated sprite output
// You can override them selectively before you import this file.
TXT
sprites.map do |sprite_name|
content += <<-SCSS
$#{name}-#{sprite_name}-position: $#{name}-position !default;
$#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
$#{name}-#{sprite_name}-repeat: $#{name}-repeat !default;
SCSS
end.join
content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n $layout: $#{name}-layout, \n $cleanup: $#{name}-clean-up,\n"
content += sprites.map do |sprite_name|
%Q{ $#{name}-#{sprite_name}-position: $#{name}-#{sprite_name}-position,
$#{name}-#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
$#{name}-#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
end.join(",\n")
content += ");"
binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri), :files => files(uri))
CONTENT_TEMPLATE.result(binder.get_binding)
end
end
end

11
lib/compass/sprite_importer/binding.rb Normal file
View File

@ -0,0 +1,11 @@
require 'ostruct'
module Compass
module Sprites
class Binding < OpenStruct
def get_binding
binding
end
end
end
end

75
lib/compass/sprite_importer/content.erb Normal file
View File

@ -0,0 +1,75 @@
@import "compass/utilities/sprites/base";
// General Sprite Defaults
// You can override them before you import this file.
$<%= name %>-sprite-base-class: ".<%= name %>-sprite" !default;
$<%= name %>-sprite-dimensions: false !default;
$<%= name %>-position: 0% !default;
$<%= name %>-spacing: 0 !default;
$<%= name %>-repeat: no-repeat !default;
$<%= name %>-prefix: '' !default;
$<%= name %>-clean-up: true !default;
$<%= name %>-layout:vertical !default;
<% if skip_overrides %>
$<%= name %>-sprites: sprite-map("<%= uri %>", $layout: $<%= name %>-layout, $cleanup: $<%= name %>-clean-up);
<% else %>
// These variables control the generated sprite output
// You can override them selectively before you import this file.
<% sprite_names.each do |sprite_name| %>
$<%= name %>-<%= sprite_name %>-position: $<%= name %>-position !default;
$<%= name %>-<%= sprite_name %>-spacing: $<%= name %>-spacing !default;
$<%= name %>-<%= sprite_name %>-repeat: $<%= name %>-repeat !default;
<% end %>
$<%= name %>-sprites: sprite-map("<%= uri %>",
<% sprite_names.each do |sprite_name| %>
$<%= name %>-<%= sprite_name %>-position: $<%= name %>-<%= sprite_name %>-position,
$<%= name %>-<%= sprite_name %>-spacing: $<%= name %>-<%= sprite_name %>-spacing,
$<%= name %>-<%= sprite_name %>-repeat: $<%= name %>-<%= sprite_name %>-repeat,
<% end %>
$layout: $<%= name %>-layout,
$cleanup: $<%= name %>-clean-up
);
<% end %>
// All sprites should extend this class
// The <%= name %>-sprite mixin will do so for you.
#{$<%= name %>-sprite-base-class} {
background: $<%= name %>-sprites no-repeat;
}
//sass functions to return the dimensions of a sprite image as units
<% [:width, :height].each do |dimension| %>
@function <%= name %>-sprite-<%= dimension %>($name) {
$file: sprite_file($<%= name %>-sprites, $name);
@return image-<%= dimension %>($file);
}
<% end %>
// Use this to set the dimensions of an element
// based on the size of the original image.
@mixin <%= name %>-sprite-dimensions($name) {
@include sprite-dimensions($<%= name %>-sprites, $name)
}
// Move the background position to display the sprite.
@mixin <%= name %>-sprite-position($name, $offset-x: 0, $offset-y: 0) {
@include sprite-background-position($<%= name %>-sprites, $name, $offset-x, $offset-y)
}
// Extends the sprite base class and set the background position for the desired sprite.
// It will also apply the image dimensions if $dimensions is true.
@mixin <%= name %>-sprite($name, $dimensions: $<%= name %>-sprite-dimensions, $offset-x: 0, $offset-y: 0) {
@extend #{$<%= name %>-sprite-base-class};
@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), $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), $offset-x: 0, $offset-y: 0) {
@include <%= name %>-sprites(<%= sprite_names.join(" ") %>, $dimensions, $prefix, $offset-x, $offset-y);
}

23
test/integrations/sprites_test.rb
View File

@ -718,4 +718,27 @@ class SpritesTest < Test::Unit::TestCase
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
it "should allow use of demension functions" do
css = render <<-SCSS
@import "squares/*.png";
$h: squares-sprite-height(twenty-by-twenty);
$w: squares-sprite-width(twenty-by-twenty);
.div {
height:$h + 1px;
width:$w + 2px;
}
SCSS
other_css = <<-CSS
.squares-sprite {
background: url('/squares-sbbc18e2129.png') no-repeat;
}
.div {
height:21px;
width:22px;
}
CSS
assert_correct css.gsub("\n", '').gsub(' ', ''), other_css.gsub("\n", '').gsub(' ', '')
end
end