Merge branch 'master' of github.com:chriseppstein/compass

This reverts commit f0f4ac9700.

Gemfile

@@ -7,23 +7,17 @@ gem "rspec", "~>2.0.0"
 gem "rails", "~>3.0.0.rc"
 gem "compass-validator", "3.0.1"
 gem "css_parser", "~> 1.0.1"
-gem "sass", "~>3.1"
+gem "sass", "~> 3.1"
 gem "haml", "~> 3.1"
-gem "rcov", :platform => :mri
+gem "rcov", :platform => :mri_18
 gem "rubyzip"
 gem "livereload"
-gem "ruby-prof", :platform => :mri
+gem "ruby-prof", :platform => :mri_18
 
-gem 'autotest'
-gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
-gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
 gem 'mocha'
 gem 'timecop'
 gem 'diff-lcs', '~> 1.1.2'
 
 gem 'rake', '0.8.7'
 
-group :mac do
-  gem "rb-fsevent"
-end
-
+#Warning becarful adding OS dependant gems to this file it will cause issues on the CI server

Gemfile.lock

@@ -0,0 +1,141 @@
+PATH
+  remote: .
+  specs:
+    compass (0.12.0.alpha.0.91a748a)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    abstract (1.0.0)
+    actionmailer (3.0.10)
+      actionpack (= 3.0.10)
+      mail (~> 2.2.19)
+    actionpack (3.0.10)
+      activemodel (= 3.0.10)
+      activesupport (= 3.0.10)
+      builder (~> 2.1.2)
+      erubis (~> 2.6.6)
+      i18n (~> 0.5.0)
+      rack (~> 1.2.1)
+      rack-mount (~> 0.6.14)
+      rack-test (~> 0.5.7)
+      tzinfo (~> 0.3.23)
+    activemodel (3.0.10)
+      activesupport (= 3.0.10)
+      builder (~> 2.1.2)
+      i18n (~> 0.5.0)
+    activerecord (3.0.10)
+      activemodel (= 3.0.10)
+      activesupport (= 3.0.10)
+      arel (~> 2.0.10)
+      tzinfo (~> 0.3.23)
+    activeresource (3.0.10)
+      activemodel (= 3.0.10)
+      activesupport (= 3.0.10)
+    activesupport (3.0.10)
+    addressable (2.2.6)
+    arel (2.0.10)
+    builder (2.1.2)
+    chunky_png (1.2.1)
+    compass-validator (3.0.1)
+    css_parser (1.0.1)
+    cucumber (0.9.4)
+      builder (~> 2.1.2)
+      diff-lcs (~> 1.1.2)
+      gherkin (~> 2.2.9)
+      json (~> 1.4.6)
+      term-ansicolor (~> 1.0.5)
+    diff-lcs (1.1.2)
+    em-dir-watcher (0.9.4)
+    em-websocket (0.3.1)
+      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.2.9)
+      json (~> 1.4.6)
+      term-ansicolor (~> 1.0.5)
+    haml (3.1.2)
+    i18n (0.5.0)
+    json (1.4.6)
+    livereload (1.6)
+      em-dir-watcher (>= 0.1)
+      em-websocket (>= 0.1.2)
+      ruby-json (>= 1.1.2)
+    mail (2.2.19)
+      activesupport (>= 2.3.6)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.16)
+    mocha (0.9.12)
+    polyglot (0.3.2)
+    rack (1.2.3)
+    rack-mount (0.6.14)
+      rack (>= 1.0.0)
+    rack-test (0.5.7)
+      rack (>= 1.0)
+    rails (3.0.10)
+      actionmailer (= 3.0.10)
+      actionpack (= 3.0.10)
+      activerecord (= 3.0.10)
+      activeresource (= 3.0.10)
+      activesupport (= 3.0.10)
+      bundler (~> 1.0)
+      railties (= 3.0.10)
+    railties (3.0.10)
+      actionpack (= 3.0.10)
+      activesupport (= 3.0.10)
+      rake (>= 0.8.7)
+      rdoc (~> 3.4)
+      thor (~> 0.14.4)
+    rake (0.8.7)
+    rcov (0.9.10)
+    rdoc (3.9.2)
+    rspec (2.0.1)
+      rspec-core (~> 2.0.1)
+      rspec-expectations (~> 2.0.1)
+      rspec-mocks (~> 2.0.1)
+    rspec-core (2.0.1)
+    rspec-expectations (2.0.1)
+      diff-lcs (>= 1.1.2)
+    rspec-mocks (2.0.1)
+      rspec-core (~> 2.0.1)
+      rspec-expectations (~> 2.0.1)
+    ruby-json (1.1.2)
+    ruby-prof (0.10.8)
+    rubyzip (0.9.4)
+    sass (3.1.7)
+    term-ansicolor (1.0.6)
+    thor (0.14.6)
+    timecop (0.3.5)
+    treetop (1.4.10)
+      polyglot
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.29)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass!
+  compass-validator (= 3.0.1)
+  css_parser (~> 1.0.1)
+  cucumber (~> 0.9.2)
+  diff-lcs (~> 1.1.2)
+  haml (~> 3.1)
+  livereload
+  mocha
+  rails (~> 3.0.0.rc)
+  rake (= 0.8.7)
+  rcov
+  rspec (~> 2.0.0)
+  ruby-prof
+  rubyzip
+  sass (~> 3.1)
+  timecop

Rakefile

@@ -29,6 +29,16 @@ To run with an alternate version of Rails, make test/rails a symlink to that ver
 To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
 END
 
+Rake::TestTask.new :units do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  test_files = FileList['test/units/**/*_test.rb']
+  test_files.exclude('test/rails/*', 'test/haml/*')
+  t.test_files = test_files
+  t.verbose = true
+end
+
+
 desc "Compile Examples into HTML and CSS"
 task :examples do
   linked_haml = "tests/haml"

VERSION.yml

@@ -1,5 +1,6 @@
 --- 
 :major: 0
-:minor: 11
-:patch: 5
-:name: Antares
+:minor: 12
+:state: alpha
+:build: 0
+:name: Alnilam

doc-src/.compass/config.rb

@@ -1,7 +1,7 @@
 # Require any additional compass plugins here.
 require 'susy'
 require 'css-slideshow'
-
+require 'compass-theme'
 # Set this to the root of your project when deployed:
 http_path = "/"
 project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))

doc-src/Gemfile

@@ -1,6 +1,8 @@
 source :gemcutter
 
-gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
+#gem 'cri', '~> 1.0.1'
+gem 'adsf'
+gem 'nanoc3' #, :git => "git://github.com/chriseppstein/nanoc.git"
 gem 'rdiscount'
 gem 'thor'
 gem 'rack'
@@ -8,12 +10,13 @@ gem 'mime-types'
 gem 'serve', "1.0.0"
 gem 'nokogiri'
 gem 'coderay'
-gem 'sass', ">= 3.1"
-gem 'haml', ">= 3.1"
+gem 'haml'
 gem 'rake'
+gem 'activesupport', '~> 3.0.10', :require => 'active_support/inflector'
 gem 'compass', :path => ".."
-gem 'compass-susy-plugin', ">=0.7.0.pre8"
-gem 'css-slideshow', "0.2.0"
+gem 'compass-theme', :path => '../../compass-theme' #:git => 'git://github.com/Compass/compass-theme.git'
+# gem 'compass-susy-plugin', ">=0.7.0.pre8"
+# gem 'css-slideshow', "0.2.0"
 gem 'json'
 gem 'css_parser', "1.0.1"
 gem 'ruby-prof'

doc-src/Gemfile.lock

@@ -1,71 +1,71 @@
-GIT
-  remote: git://github.com/chriseppstein/nanoc.git
-  revision: 4eee0e60c5121b90498caa88605d416521553378
-  specs:
-    nanoc3 (3.2.0a3)
-      cri (>= 1.0.0)
-
 PATH
   remote: ..
   specs:
-    compass (0.11.1.93b89a2)
-      chunky_png (~> 1.1)
+    compass (0.12.alpha.0.374aed6)
+      chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
 
 GEM
   remote: http://rubygems.org/
   specs:
-    activesupport (3.0.7)
-    builder (2.1.2)
-    chunky_png (1.2.0)
-    coderay (0.9.7)
-    compass-susy-plugin (0.9.beta.3)
-      compass (>= 0.11.beta.3)
-    cri (1.0.1)
+    activesupport (3.0.10)
+    adsf (1.0.1)
+      rack (>= 1.0.0)
+    builder (3.0.0)
+    chunky_png (1.2.1)
+    coderay (0.9.8)
+    compass-susy-plugin (0.9)
+      compass (>= 0.11.1)
+    compass-theme (0.0.1)
+      compass (~> 0.11)
+      compass-susy-plugin (>= 0.7.0.pre8)
+      css-slideshow (= 0.2.0)
+    cri (2.0.2)
     css-slideshow (0.2.0)
       compass (>= 0.10.0.rc3)
     css_parser (1.0.1)
     fssm (0.2.7)
-    haml (3.1.0)
+    haml (3.1.2)
     i18n (0.4.2)
-    json (1.5.1)
+    json (1.5.4)
     mime-types (1.16)
-    nokogiri (1.4.4)
-    rack (1.2.2)
-    rake (0.8.7)
-    rb-fsevent (0.4.0)
+    nanoc3 (3.2.1)
+      cri (~> 2.0)
+    nokogiri (1.5.0)
+    rack (1.2.3)
+    rake (0.9.2)
+    rb-fsevent (0.4.3.1)
     rdiscount (1.6.8)
-    ruby-prof (0.9.2)
-    sass (3.1.0)
+    ruby-prof (0.10.8)
+    sass (3.1.7)
     serve (1.0.0)
       activesupport (~> 3.0.1)
       i18n (~> 0.4.1)
       rack (~> 1.2.1)
       tzinfo (~> 0.3.23)
     thor (0.14.6)
-    tzinfo (0.3.26)
+    tzinfo (0.3.29)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  adsf
   builder
   coderay
   compass!
-  compass-susy-plugin (>= 0.7.0.pre8)
-  css-slideshow (= 0.2.0)
+  compass-theme (~> 0.0.1)
   css_parser (= 1.0.1)
-  haml (>= 3.1)
+  haml
   json
   mime-types
-  nanoc3!
+  nanoc3
   nokogiri
   rack
   rake
   rb-fsevent
   rdiscount
   ruby-prof
-  sass (>= 3.1)
   serve (= 1.0.0)
   thor

doc-src/Rules

@@ -63,6 +63,7 @@ end
 
 compile '*' do
   if item[:extension] == "markdown"
+    filter :erb
     filter :rdiscount
   elsif item[:extension] == "haml"
     filter :haml, :ugly => true

doc-src/content/CHANGELOG.markdown

@@ -14,10 +14,36 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
 
 The Documentation for the [latest preview release](http://beta.compass-style.org/)
 
+0.12.alpha.1 (UNRELEASED)
+-------------------------
+
+* font-files helper: Stop requiring font type when the type can be guessed from URL
+* inline-font-files: actually works now
+* Upgrade CSS3 Pie to 1.0beta5
+
+
+0.12.alpha.0 (8/30/2011)
+------------------------
+* Support for the rails 3.1 asset pipeline
+* Added support for diagonal, horizontal, and smart sprite layout
+* Fixed a bug with spacing in horizontal layout
+* Changed the descriptions of the sin, cos, and tan to be more descriptive
+* Fixed trig functions via issue #498 
+* Fixed the default `http_path` in rails
+* Sprites can now have a `sprite_search_path` that is an array of directories that
+  contain source images for sprites handy for using sprites in extensions or gems
+* Added a new set of configuration properties for generated images.
+  `generated_images_dir`, `generated_images_path`, `http_generated_images_dir`,
+  and `http_generated_images_path` can now be set to control where generated
+  images are written and how they are served. Added a corresponding
+  `generated-image-url()` helper function. These should rarely be needed and
+  will default to your corresponding image directories and paths.
+
 0.11.6 (UNRELEASED)
 -------------------
 
-* Added `user-select` mixin to control the selection model and granularity of an element. It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
+* Added `user-select` mixin to control the selection model and granularity of an element.
+  It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
 
 0.11.5 (07/10/2011)
 -------------------

doc-src/content/help/tutorials/configuration-reference.markdown

@@ -170,11 +170,33 @@ later on.
   </tr>
   <tr>
     <td style="vertical-align:top;"><code>http_images_path</code> </td>
-    <td style="vertical-align:top;">String </td>
+    <td style="vertical-align:top;">String</td>
     <td style="vertical-align:top;">The full http path to images on the web server.
       Defaults to <code>http_path + "/" + images_dir</code>.
     </td>
   </tr>
+  <tr>
+    <td style="vertical-align:top;"><code>generated_images_dir</code> </td>
+    <td style="vertical-align:top;">String</td>
+    <td style="vertical-align:top;">The directory where generated images are kept.
+      It is relative to the <code>project_path</code>.
+      Defaults to the value of <code>images_dir</code>.
+    </td>
+  </tr>
+  <tr>
+    <td style="vertical-align:top;"><code>generated_images_path</code> </td>
+    <td style="vertical-align:top;">String</td>
+    <td style="vertical-align:top;">The full path to where generated images are kept.
+      Defaults to the value of <code>&lt;project_path&gt;/&lt;generated_images_dir&gt;</code>.
+    </td>
+  </tr>
+  <tr>
+    <td style="vertical-align:top;"><code>http_generated_images_path</code> </td>
+    <td style="vertical-align:top;">String</td>
+    <td style="vertical-align:top;">The full http path to generated images on
+      the web server. Defaults to <code>http_path + "/" + generated_images_dir</code>.
+    </td>
+  </tr>
   <tr>
     <td style="vertical-align:top;"><code>javascripts_dir</code> </td>
     <td style="vertical-align:top;">String </td>

doc-src/content/help/tutorials/contributing.markdown

@@ -13,7 +13,7 @@ as we can for you to contribute changes to compass -- So if there's something he
 seems harder than it aught to be, please let us know.
 
 If you find a bug **in this document**, you are bound to contribute a fix. Stop reading now
-if you do not wish to abide by this rool.
+if you do not wish to abide by this rule.
 
 **Step 1**: If you do not have a github account, create one.
 

doc-src/content/help/tutorials/spriting.markdown

@@ -5,12 +5,16 @@ crumb: Spriting
 classnames:
   - tutorial
 ---
+
 # Spriting with Compass
 
 Spriting has never been easier with Compass. You place the sprite images in a folder,
 import them into your stylesheet, and then you can use the sprite in your selectors in one
 of several convenient ways.
 
+## Sprite Tutorial Contents
+<%= sprite_tutorial_links(true) %>
+
 ## Setup
 
 For this tutorial, let's imagine that in your project's image folder there are four icons:
@@ -23,6 +27,9 @@ For this tutorial, let's imagine that in your project's image folder there are f
 Each is an icon that is 32px square.
 
 ## Basic Usage
+
+****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+
 The simplest way to use these icon sprites is to let compass give you a class for each sprite:
     
     @import "icon/*.png";
@@ -45,9 +52,9 @@ You can now apply the `icon-XXX` classes to your markup as needed.
 
 Let's go over what happened there. The import statement told compass to [generate a
 stylesheet that is customized for your sprites](https://gist.github.com/729507). This
-stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized
+stylesheet is [magic](/help/tutorials/spriting/magic-imports), it is not written to disk, and it can be customized
 by setting configuration variables before you import it. See the section below on
-[Customization Options](#customization-options). The goal of this stylesheet is to provide a
+[Customization Options](/help/tutorials/spriting/customization). The goal of this stylesheet is to provide a
 simple naming convention for your sprites so that you they are easy to remember and use. You
 should never have to care what the is name of the generated sprite map, nor where a sprite
 is located within it.
@@ -101,102 +108,6 @@ might want to avoid it. For instance, if your sprite map has more than about 20
 sprites, you may find that hand crafting the import will speed up compilation times. See
 the section on [performance considerations](#performance) for more details.
 
-<a name="magic-selectors"></a>
-## Magic Selectors
-
-If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
-
-* `selectors/ten-by-ten.png`
-* `selectors/ten-by-ten_hover.png`
-* `selectors/ten-by-ten_active.png`
-* `selectors/ten-by-ten_target.png`
-    
-Now in our sass file we add:
-
-    @import "selectors/*.png";
-    
-    a {
-      @include selectors-sprite(ten-by-ten)
-    }
-    
-And your stylesheet will compile to:
-
-    .selectors-sprite, a {
-      background: url('/selectors-sedfef809e2.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;
-    }
-
-Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
-
-    .selectors-sprite, .selectors-ten-by-ten {
-      background: url('/selectors-sedfef809e2.png') no-repeat;
-    }
-
-    .selectors-ten-by-ten {
-      background-position: 0 0;
-    }
-    .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.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;
-    }
-
-
-
-<a name="customization-options"></a>
-## Customization Options
-
-### Options per Sprite Map
-
-When constructing the sprite map, the entire sprite map and it's associated stylesheet
-can be configured in the following ways. Each option is specified by setting a [configuration
-variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
-are named according to the name of the folder containing the sprites. In the examples below
-the sprites were contained within a folder called `icon`.
-
-* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
-  Defaults to `0px`. E.g. `$icon-spacing: 20px`.
-* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
-  to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
-* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
-  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
-  sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
-  E.g. `$icon-position: 100%`.
-* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
-  included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
-* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
-  E.g. `$icon-sprite-base-class: ".action-icon"`
-* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
-
-### Options per Sprite
-
-When constructing the sprite map, each sprite can be configured in the following ways:
-
-* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
-  to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
-* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
-  to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
-* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
-  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
-  sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
-  position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
-
 <a name="performance"></a>
 ## Performance Considerations
 

doc-src/content/help/tutorials/spriting/customization-options.markdown

@@ -0,0 +1,45 @@
+---
+title: Sprite Customization
+layout: tutorial
+crumb: Customization
+classnames:
+  - tutorial
+---
+#Sprite Tutorial
+<%= sprite_tutorial_links %>
+## Customization Options
+
+### Options per Sprite Map
+
+When constructing the sprite map, the entire sprite map and it's associated stylesheet
+can be configured in the following ways. Each option is specified by setting a [configuration
+variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
+are named according to the name of the folder containing the sprites. In the examples below
+the sprites were contained within a folder called `icon`.
+
+* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
+  Defaults to `0px`. E.g. `$icon-spacing: 20px`.
+* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
+  to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
+* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
+  E.g. `$icon-position: 100%`.
+* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
+  included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
+* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
+  E.g. `$icon-sprite-base-class: ".action-icon"`
+* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
+
+### Options per Sprite
+
+When constructing the sprite map, each sprite can be configured in the following ways:
+
+* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
+  to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
+* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
+  to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
+* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
+  position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.

doc-src/content/help/tutorials/spriting/magic-selectors.markdown

@@ -0,0 +1,74 @@
+---
+title: Sprite Magic Selectors
+layout: tutorial
+crumb: Magic Selectors
+classnames:
+  - tutorial
+---
+#Sprite Tutorial
+<%= sprite_tutorial_links %>
+
+## Magic Selectors
+
+If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
+
+* `selectors/ten-by-ten.png`
+* `selectors/ten-by-ten_hover.png`
+* `selectors/ten-by-ten_active.png`
+* `selectors/ten-by-ten_target.png`
+    
+Now in our sass file we add:
+
+    @import "selectors/*.png";
+    
+    a {
+      @include selectors-sprite(ten-by-ten)
+    }
+    
+And your stylesheet will compile to:
+
+    .selectors-sprite, a {
+      background: url('/selectors-sedfef809e2.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;
+    }
+
+Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
+
+    .selectors-sprite, .selectors-ten-by-ten {
+      background: url('/selectors-sedfef809e2.png') no-repeat;
+    }
+
+    .selectors-ten-by-ten {
+      background-position: 0 0;
+    }
+    .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.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;
+    }
+    
+## Disabling
+  To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin
+  
+    a {
+      $disable-magic-sprite-selectors:true;
+      @include selectors-sprite(ten-by-ten)
+    }
+  
+

doc-src/content/help/tutorials/spriting/sprite-layouts.markdown

@@ -0,0 +1,69 @@
+---
+title: Sprite layouts
+layout: tutorial
+crumb: Sprite layouts
+classnames:
+  - tutorial
+---
+# Sprite Tutorial
+<%= sprite_tutorial_links %>
+
+## Sprite Layouts
+
+Example:
+
+    $icon-layout:horizontal;
+    @import "icon/*.png";
+    
+    $dropcap-layout:diagonal
+    @import "dropcap/*.png";
+
+## Vertical
+
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Vertical Example](/images/tutorials/sprites/layout/vert.png)
+## Horizontal
+
+    $mysprite-layout:horizontal;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Horizontal Example](/images/tutorials/sprites/layout/horizontal.png)
+
+Notes:
+
+  * Responds to the same configuration options that vertical has.
+  
+## Diagonal
+
+    $mysprite-layout:diagonal;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Diagonal Example](/images/tutorials/sprites/layout/diagonal.png)
+
+Notes:
+
+  * Configuration options do not effect the layout
+  * This is incredibly resource intensive on the browser
+
+## Smart
+
+    $mysprite-layout:smart;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Smart Example](/images/tutorials/sprites/layout/smart.png)
+
+Notes:
+
+  * Configuration options do not effect the layout
+  * Most efficient use of browser memory
+
+Example icons from [Open Icon Library](http://openiconlibrary.sourceforge.net/) and are released under public domain

doc-src/content/index.haml

@@ -12,7 +12,7 @@ layout: homepage
     %ol
       %li Experience cleaner markup without presentational classes.
       %li It’s chock full of the web’s best reusable patterns.
-      %li Developing a personal framework is simple. 
+      %li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
       %li Compass mixins make CSS3 easy.
       %li Download and create extensions with ease.
   .sass

doc-src/content/reference/compass/helpers/trig.haml

@@ -35,8 +35,9 @@ documented_functions:
       sin($number)
   .details
     %p
-      Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code>
-      then it will return a unitless result. Degrees will first be converted to radians.
+      Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
+      then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
+      will be evaluated as radians. Degrees will first be converted to radians.
       If the number is any other unit, the units will be passed thru to the result,
       and the number will be treated as radians.
 
@@ -46,8 +47,9 @@ documented_functions:
       cos($number)
   .details
     %p
-      Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
-      then it will return a unitless result. Degrees will first be converted to radians.
+      Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
+      then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
+      will be evaluated as radians. Degrees will first be converted to radians.
       If the number is any other unit, the units will be passed thru to the result,
       and the number will be treated as radians.
 #tan.helper
@@ -56,7 +58,8 @@ documented_functions:
       tan($number)
   .details
     %p
-      Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
-      then it will return a unitless result. Degrees will first be converted to radians.
+      Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
+      then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
+      will be evaluated as radians. Degrees will first be converted to radians.
       If the number is any other unit, the units will be passed thru to the result,
       and the number will be treated as radians.

doc-src/content/reference/compass/helpers/urls.haml

@@ -12,6 +12,7 @@ documented_functions:
   - "stylesheet-url"
   - "font-url"
   - "image-url"
+  - "generated-image-url"
 ---
 %h1 Compass URL Helpers
 
@@ -31,7 +32,7 @@ documented_functions:
       Generates a path to an asset found relative to the project's css directory.
       %br
       Passing a true value as the second argument will cause the only the path to be returned
-      instead of a `url()` function
+      instead of a <code>url()</code> function
 
 #font-url.helper
   %h3
@@ -42,7 +43,7 @@ documented_functions:
       Generates a path to an asset found relative to the project's font directory.
       %br
       Passing a true value as the second argument will cause the only the path to be returned
-      instead of a `url()` function
+      instead of a <code>url()</code> function
 
 #image-url.helper
   %h3
@@ -53,9 +54,27 @@ documented_functions:
       Generates a path to an asset found relative to the project's images directory.
     %p
       Passing a true value as the second argument will cause the only the path to be returned
-      instead of a `url()` function
+      instead of a <code>url()</code> function
     %p
       The third argument is used to control the cache buster on a per-use basis.
-      When set to `false` no cache buster will be used. When a string, that
+      When set to <code>false</code> no cache buster will be used. When a string, that
       value will be used as the cache buster.
 
+#generated-image-url.helper
+  %h3
+    %a(href="#generated-image-url")
+      generated-image-url($path, $cache-buster: false)
+  .details
+    %p
+      Generates a path to an image generated during compilation using the
+      <code>generated_image</code> related configuration properties.
+    %p
+      Most users will never call this helper directly, it is primarily provided
+      for use by plugins that need to generate paths to images they create. E.g.
+      The <code>sprite-url()</code> helper calls this helper.
+    %p
+      The second argument is used to control the cache buster on a per-use basis.
+      Defaults to <code>false</code>, meaning that no cache buster will be used.
+      When a string, that value will be used as the cache buster, when <code>true</code>
+      Compass will generate a cache-buster based on the image's modification time.
+

doc-src/content/stylesheets/core/_base-classes.sass

@@ -1,70 +0,0 @@
-$default-rounded-corner: 4
-
-.group
-  +pie-clearfix
-
-.truncate
-  +ellipsis
-
-.border-box
-  +box-sizing(border-box)
-
-.round-corners-4
-  +border-radius(4px)
-
-.round-corners-em
-  +border-radius(1em)
-  
-=round-corners($num: $default-rounded-corner)
-  @extend .round-corners-#{$num}
-
-=round-top-corners($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-bottom-right-corner
-  @extend .clear-bottom-left-corner
-=round-bottom-corners($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-  @extend .clear-top-left-corner
-=round-left-corners($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-  @extend .clear-bottom-right-corner
-=round-right-corners($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-left-corner
-  @extend .clear-bottom-left-corner
-
-=round-top-left-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-  @extend .clear-bottom-right-corner
-  @extend .clear-bottom-left-corner
-=round-top-right-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-left-corner
-  @extend .clear-bottom-right-corner
-  @extend .clear-bottom-left-corner
-=round-bottom-left-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-  @extend .clear-bottom-right-corner
-  @extend .clear-top-left-corner
-=round-bottom-right-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-  @extend .clear-top-left-corner
-  @extend .clear-bottom-left-corner
-
-=square-top-left-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-left-corner
-=square-top-right-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-top-right-corner
-=square-bottom-left-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-bottom-left-corner
-=square-bottom-right-corner($num: $default-rounded-corner)
-  +round-corners($num)
-  @extend .clear-bottom-right-corner

doc-src/content/stylesheets/core/_clearing-classes.sass

@@ -1,17 +0,0 @@
-.clear-top-left-corner
-  +border-top-left-radius(0)
-.clear-top-right-corner
-  +border-top-right-radius(0)
-.clear-bottom-left-corner
-  +border-bottom-left-radius(0)
-.clear-bottom-right-corner
-  +border-bottom-right-radius(0)
-
-.hide
-  display: none
-.clear-box-shadow
-  +box-shadow(none)
-.clear-border-radius
-  @extend .clear-rounded-corners
-.clear-rounded-corners
-  +border-radius(0)

doc-src/content/stylesheets/core/_extensions.scss

@@ -1,10 +0,0 @@
-@mixin reset($reset-type: false){
-  @if($reset-type){
-    @if($reset-type == global){
-      @include global-reset;
-    }
-    @if($reset-type == html5){
-      @include reset-html5;
-    }
-  }
-}

doc-src/content/stylesheets/partials/_blog.scss

@@ -1,6 +0,0 @@
-body#blog-archive {
-  .timestamp {
-    margin-right: 1em;
-    font-size: 12px;
-  }
-}

doc-src/content/stylesheets/partials/_code.scss

@@ -1,113 +0,0 @@
-//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
-.mixin-source, .example-source, .function-source {
-  position: relative; @extend .fixed-font;
-  .syntaxhighlighter, pre {
-  &.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
-
-html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
-html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
-html.css .example-source .syntaxhighlighter.css { display: block; }
-html.html .example-source .syntaxhighlighter.html { display: block; }
-html.haml .example-source .syntaxhighlighter.haml { display: block; }
-
-
-
-.mixin-source, .function-source { display: none; }
-
-html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
-  margin: 0 0 2px;
-  code { padding: 0; }
-  //font-size: 1.1em;
-  text-shadow: none;
-  .code-block { background: none; @extend .clear-box-shadow; }
-  table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
-  .toolbar { display: none; }
-  //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
-  }
-
-a[rel="github-source"] {
-  position: relative;
-  float: right;
-  top: 1.1em;
-}
-
-pre {
-  margin: 1.5em 0;
-  overflow: auto;
-  .code-block:first-child { padding: .6em; display: block; }
-  .code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
-}
-
-.code-block { @extend .round-corners-4; @extend .fixed-font;
-  display: inline-block;
-  font-size: .95em;
-  padding: 0 .4em;
-  line-height: 1.5em;
-}
-
-.source-documentation {
-  @extend .round-corners-4;
-  padding: 10px 15px;
-  @include round-bottom-corners
-}
-
-h3 { @include round-corners;
-  padding: 10px 15px;
-  margin: 20px 0 20px;
-  font-weight: bold;
-  position: relative;
-  a { text-decoration: none;}
-  code, .arg { font-weight: normal; }
-}
-h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
-.arg {
-  display: inline-block;
-  padding: 0 2px;
-  &[data-default-value] {
-    font-style: italic;
-    &:before { content: "[" ; }
-    &:after { content: "]" ; }}
-}
-
-a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
-h2 + a[rel="view source"]{ margin-top: 6px;}
-
-.syntaxhighlighter {
-  a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
-    background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
-    padding: 0; margin: 0; outline: 0;
-    overflow: visible; position: static; right: auto;
-    text-align: left; top: auto; vertical-align: baseline;
-    width: auto;
-    font: { weight: normal; style: normal;
-      size: 1em;
-    }
-    min: { height: inherit; }
-  }
-}
-
-.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
-
-  // set up bold and italic
-  .bold { font-weight: bold; }
-  .italic { font-style: italic; }
-  .line { white-space: pre; }
-
-  // main table and columns
-  table { width: 100%;
-    td.code { width: 100%;
-      .line { padding: 0 .6em; } }
-    td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
-
-  // Styles for the toolbar
-  .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
-    span.title { display: inline; }
-    a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
-  .container { position: relative; }
-  textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
-}
-.syntaxhighlighter, pre .code-block:first-child, pre {
-  &::-webkit-scrollbar { height: 12px; }
-  &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
-  &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
-}

doc-src/content/stylesheets/partials/_example.scss

@@ -1,29 +0,0 @@
-html.light #demo, html.dark #demo {
-  color: #333;
-}
-
-#demo {
-  @include round-corners;
-  @extend .group;
-  background: #fff;
-  margin-bottom: 1.2em;
-  padding: 40px;
-  code {
-    @include box-shadow(rgba(#000, .3) 0 1px 3px, rgba(#000, .15) 0 1px 0 0 inset);
-    background: #fff;
-    color: inherit;
-  }
-}
-
-#how {
-  section { width: 49%; float: left; }
-  section + section { float: right; }
-
-  .example-source { clear: both; }
-}
-
-#reference {
-  float: right;
-  margin-top: 1em;
-}
-

doc-src/content/stylesheets/partials/_home.scss

@@ -1,99 +0,0 @@
-body#home {
-  width: 810px;
-  #page { padding-top: 31px;}
-  h1#logo {
-    $logo: 'compass-logo.png';
-    background: image-url($logo) no-repeat;
-    text-indent: -9999px;
-    overflow: hidden;
-    width: image-width($logo);
-    height: image-height($logo)/2;
-    padding: 0;
-    margin: 0 auto 18px;
-  }
-  #{headings()}{ @extend .heading-font; }
-  h2 {
-    text-align: center;
-    font-size: 30px;
-    padding-bottom: 15px;
-    margin-bottom: 30px;
-    line-height: 1.1em;
-  }
-  h3 {
-    text-align: center;
-    font-size: 25px;
-    margin-top: 32px;
-  }
-  h4 { font-size: 1.5em; }
-  .overview {
-    @extend .group;
-    .compass { width: 406px; float: left;
-      h4:before { content: "k"; } }
-    .sass { width: 275px; float: right; 
-      h4:before { content: "2"; } }
-    div { 
-      padding: 20px;
-      h4 {
-        padding-bottom: 12px;
-        margin-bottom: 12px;
-        &:before {
-          @extend .pictos;
-          color: #fb292d;
-          display: inline-block;
-          font-size: 1.2em;
-          padding-right: .3em;
-        }
-      }
-    }
-    ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
-    p { margin-bottom: 0; }
-    ol, p { line-height: 1.8em; font-size: .95em;}
-  }
-}
-ul#featured_sites {
-  @extend .group;
-  overflow: visible;
-  margin-top: 30px;
-  list-style: none;
-  padding: 0px;
-  li {
-    float: left;
-    text-shadow: none;
-    overflow: visible;
-    position: relative;
-    &:nth-child(3n+2){ margin: 0 7px; }
-    &:nth-child(1n+4){ margin-top: 7px; }
-    &:nth-child(3n+4){ clear: left; }
-    padding: 6px;
-    a { text-decoration: none; }
-    img { float: left; width: 240px; }
-    span { display: none;}
-    &:hover { z-index: 100;
-      padding: 3px 2px;
-      img { width: 248px; }
-      span { display: block; position: absolute; text-shadow: none;}
-    }
-    .url {
-      bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
-      font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
-    .title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
-  }
-}
-section.book, section.gui {
-  width: 48%;
-  float: left;
-  @extend .group;
-  h3 { margin-bottom: 1em; height: 2em; text-align: left; }
-}
-section.book {
-  margin-right: 2%;
-  img { float: left; margin-right: 1em; margin-bottom: 1em; }
-}
-section.gui  {
- text-align: center;
- .note {
-   font-size: smaller;
- }
-}
-
-html.light body#home { h1#logo { background-position: bottom;} }

doc-src/content/stylesheets/partials/_install.scss

@@ -1,10 +0,0 @@
-body#install {
-  #steps, p.madlib, p.note, h4 { margin-top: 1em;                        }
-  p.note                       { font-size: smaller; font-style: italic; }
-  p.warning                    { color: #c00;                            }
-  .customization               { display: none;                          }
-  .customizable .customization { display: inline;                        }
-  blockquote                   { border-left: 2px solid #ccc;
-                                 text-indent: 0; padding-left: 0.5em;    }
-  .customization input         { width: 8em;                             }
-}

doc-src/content/stylesheets/partials/_layout.scss

@@ -1,21 +0,0 @@
-$min-width: 700px;
-$side-nav-width: 160px;
-$main-min-width: $min-width - $side-nav-width;
-
-body {
-  max-width: 1500px;
-  min-width: $min-width;
-  margin: 0 auto;
-  @extend .sans-font;
-  line-height: 1.45em;
-}
-
-#wrap { @extend .group; padding: 0 20px 20px; }
-#page { @extend .group; padding-bottom: 30px; }
-footer { @extend .group; clear: both; padding-top: 20px;}
-header { padding: 22px 0 0; position: relative; }
-#page aside + article { margin-left: $side-nav-width + 22px; padding-left: 23px; }
-aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
-
-body#home #page article { padding-left: 0;}
-body.site, body#changelog, body.default { max-width: 1024px; }

doc-src/content/stylesheets/partials/_main.scss

@@ -1,63 +0,0 @@
-body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
-
-#page {
-  position: relative;
-  padding-top: 40px;
-  & > article { padding-top: 10px; font-size: 15px;
-  img { max-width: 100%; } } }
-
-#theme_pref {
-  a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
-
-#docs_panel {
-  position: absolute; top: 0; right: 0;
-  width: 100%;
-  & > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;}
-  a { text-decoration: none; }
-  #theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
-  #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
-
-}
-
-#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
-
-.syntax_pref {
-  float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
-  a { text-decoration: none; }
-}
-
-footer {
-  .links { float: left; font-size: .9em;
-    img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
-    span { position: relative; top: -1px; }
-    ul { @include horizontal-list(15px); overflow: visible;
-    li { padding-top: 3px; }
-    li:last-child {border: 0; @include box-shadow(none); } } }
-}
-#page article h2 {
-  margin-top: 1.5em;
-}
-h2 a.help {
-  text-indent: -9999px;
-  display: inline-block;
-  position: relative;
-  text-decoration: none;
-  @include opacity(.3);
-  &:hover { @include opacity(.7); }
-  &:before {
-    @extend .pictos;
-    content: "?";
-    text-indent: 0;
-    position: absolute;
-    top: 2px;
-    left: 0;
-    font-size: .85em;
-  }
-}
-hr {
-  height: 0px;
-  border: 0;
-  border-bottom-width: 4px;
-  margin: 3em 0;
-  background: transparent;
-}

doc-src/content/stylesheets/partials/_nav.scss

@@ -1,96 +0,0 @@
-.triangle-marker {
-  border-color: transparent transparent;
-  content: "\00a0";
-  height: 0; width: 0;
-  position: absolute;
-  border-style: solid; }
-
-nav a { @include hover-link; }
-nav .selected a:hover { text-decoration: none;}
-
-header { @extend .group;
-  font-size: 1.3em; @extend .heading-font; border-width: 4px;}
-#main-nav {
-  display: inline-block;
-  padding-bottom: 10px;
-  ul {
-    @include horizontal-list(10px);
-    line-height: 2em; }}
-
-#sub-nav {
-  @extend .group;
-  padding: 8px 0; }
-
-#docs-nav, #module-nav {
-  display: inline-block;
-  float: left;
-  a {
-    padding: 2px 10px;
-    display: inline-block; }}
-
-#docs-nav { padding-right: 30px;
-  & + #module-nav {
-    padding-left: 20px;
-  }}
-
-#module-nav {
-  display: inline-block;
-  ul { @include horizontal-list(false); }}
-
-body.getting-started #module-nav li.getting-started,
-body.tutorial #module-nav li.tutorials,
-body.support #module-nav li.support,
-#module-nav li.selected {
-  position: relative;
-  a {
-    text-decoration: none;
-  }
-  a:before{ @extend .triangle-marker;
-    border-width: 0 8px 8px;
-    z-index: 2;
-    bottom: -9px;
-    left: 50%;
-    margin-left: -8px;
-    border-bottom-color: #121212;
-  }
-  &:before { @extend .triangle-marker;
-    border-bottom-color: #414141;
-    border-width: 0 6px 6px;
-    z-index: 3;
-    bottom: -9px;
-    left: 50%;
-    margin-left: -6px;
-  }
-  &:after { @extend .triangle-marker;
-    border-bottom-color: #343434;
-    border-width: 0 5px 5px;
-    z-index: 3;
-    bottom: -10px;
-    left: 50%;
-    margin-left: -5px;
-  }
-}
-
-#search-docs {
-  width: 170px;
-  float: right;
-  position: relative;
-  top: .3em;
-  //position: absolute; top: 29px; right: 0;
-  &:before {
-    content: "s";
-    display: block;
-    @extend .pictos;
-    position: absolute;
-    left: 6px;
-    top: 4px;
-    font-size: .8em;
-    z-index: 20;
-    @include opacity(.8)
-  }
-  input { @extend .sans-font; @include round-corners;
-    @include box-sizing(border-box);
-    width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
-    font-size: .8em;
-    float: right;
-    position: relative; } }

doc-src/content/stylesheets/partials/_sidebar.scss

@@ -1,31 +0,0 @@
-aside {
-  padding-top: 15px;
-  text-align: right;
-  padding-right: 22px;
-  h2, h3 {
-    text-align: left;
-    font-size: 1.3em;
-    line-height: 1.45em;
-    padding-bottom: .2em;
-    margin-bottom: .4em;
-    @extend .clear-border-radius;
-  }
-  h3 {
-    padding: 0 0 .5em; line-height: 1.1em;
-  }
-  a {
-    font-size: .85em;
-  }
-  ul ul a {
-    &.selected, &.selected:hover {
-      font-weight: bold;
-      text-decoration: underline;
-    }
-  }
-  .deprecated {
-    text-decoration: line-through;
-  }
-  .beta span:after {
-    content: " (\3B2)";
-  }
-}

doc-src/content/stylesheets/partials/_theme.scss

@@ -1,275 +0,0 @@
-@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
-  background: $page-bg;
-  body { background: $page-bg; color: $text;
-    a { color: $link; } }
-
-  #page { @extend .horizontal-rule-#{$theme}; }
-  header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
-
-  nav a { color: $nav-link; }
-  #main-nav a { color: $main-nav;}
-
-  body#home #main-nav a[rel=home],
-  body#help #main-nav a[rel=help],
-  body.tutorial #main-nav a[rel=help],
-  body.reference #main-nav a[rel=documentation],
-  body#changelog #main-nav a[rel=documentation],
-  body.demo #main-nav a[rel=documentation],
-  body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
-
-  #search-docs input {
-    @extend .inset-panel-#{$theme}; color: $search;
-    &::-webkit-input-placeholder { color: $search; } }
-  #{headings()}{ color: $heading;
-    strong { color: $main-nav-selected; }
-    em { color: $code; } }
-
-  #page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
-  hr { @extend .horizontal-rule-#{$theme};
-    border-bottom-width: 8px}
-  body#home h2 { @extend .horizontal-rule-#{$theme}; }
-
-  #page aside + article { @extend .vertical-rule-left-#{$theme}; }
-
-  aside {
-    h2 a { color: $strong-text; }
-    h2, h3 { @extend .horizontal-rule-#{$theme}; }}
-
-  footer .links li { @extend .vertical-rule-#{$theme}; }
-  code { @extend .code-block-#{$theme}; color: $code; }
-
-  #theme_pref { @extend .theme-switch-#{$theme}; }
-  #docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }
-
-  body#home .overview div { @extend .inset-panel-#{$theme};
-    h4 { @extend .horizontal-rule-#{$theme}; } }
-  #featured_sites li { @extend .inset-panel-#{$theme}; }
-
-}
-@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
-
-  #page > article {
-    h1 { @extend .horizontal-rule-#{$theme}; }
-    h2 { @extend .horizontal-rule-top-#{$theme}; }
-    h3 { @extend .heading-panel-#{$theme}; }
-    h1 + h2, hr + h2 {
-      @extend .clear-box-shadow; border-top: 0;
-    margin-top: 0;}
-  }
-
-  #sub-nav { @extend .horizontal-rule-#{$theme}; }
-  #docs-nav { @extend .vertical-rule-#{$theme}; }
-  body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
-  #main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
-
-  #module-nav {
-    ul { overflow: visible; }}
-  body.getting-started #module-nav li.getting-started,
-  body.tutorial #module-nav li.tutorials,
-  body.support #module-nav li.support,
-  #module-nav li.selected { @extend .selected-marker-#{$theme};
-    a { color: $module-nav-selected; } }
-
-  a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
-  &.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
-
-  #version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
-  .mixin-source, .example-source, .function-source { @extend .mixin-panel-#{$theme};
-    .container textarea { color: $code; }
-  }
-  h2 a.help { color: $heading;}
-
-  .source-documentation { @extend .doc-panel-#{$theme}; }
-
-  #demo { @extend .demo-#{$theme}; }
-
-  .arg { color: $code; }
-  .arg[data-default-value] { color: rgba($code, .7); }
-  a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
-
-}
-
-// Dark theme
-.inset-panel-dark {
-  @include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
-  background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
-
-.horizontal-rule-dark {
-  @include box-shadow(rgba(#fff, .07) 0 1px 0);
-  border-bottom: 1px solid #121212; }
-
-.horizontal-rule-top-dark {
-  @include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
-  border-top: 1px solid #121212; }
-
-.vertical-rule-dark {
-  @include box-shadow(rgba(#fff, .07) 1px 0 0);
-  border-right: 1px solid #121212; }
-
-.vertical-rule-left-dark {
-  @include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
-  border-left: 1px solid #121212; }
-
-.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
-
-.demo-dark {
-  @include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
-
-.heading-panel-dark {
-  background: darken(#2f2f2f, 6);
-  background: rgba(#000, .2);
-  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
-  a:hover { color: #fff;
-    .arg { color: rgba(#fff, .6);}
-  }
-}
-.doc-panel-dark {
-  background: darken(#2f2f2f, 4);
-  background: rgba(#000, .1);
-  @include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
-}
-
-.syntax-switch-dark {
-  color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
-  &:hover { color: #fff; text-shadow: #000 0 1px 0; } }
-
-.theme-switch-dark {
-  cursor: pointer;
-  a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
-  &:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
-
-.selected-marker-dark {
-  a:before{ border-bottom-color: #121212; }
-  &:before { border-bottom-color: #414141; }
-  &:after { border-bottom-color: #323232; }
-}
-.mixin-panel-dark {
-  @extend .inset-panel-dark;
-  td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
-  .container textarea { background: darken(#2f2f2f, 6); }
-}
-
-@mixin dark-theme($docs: false) {
-  $page-bg: #2f2f2f;
-
-  $text: #c6c6c6;
-  $heading: white;
-  $strong-text: #dbdbdb;
-
-  $search: #6e6e6e;
-
-  $code: #dadbb1;
-  $nav-link: #bfbfbf;
-  $link: saturate(lighten(#85AFC9, 4), 19);
-
-  $main-nav: white;
-  $main-nav-selected: #fb292d;
-  $docs-nav-selected: $strong-text;
-  $module-nav-selected: $link;
-
-  $option-panel-border: rgba(#000, .5);
-  $option-panel-bg: rgba(#fff, .06);
-
-  @include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
-
-  @if($docs){
-    @include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
-    .syntaxhighlighter, pre, pre .code-block:first-child {
-      &::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
-    }
-    .syntaxhighlighter, pre, pre .code-block:first-child {
-      &::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
-    }
-  }
-}
-
-// Light Theme
-.inset-panel-light {
-  @include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
-  text-shadow: 0 1px 1px #fff;
-  background: darken(#fff, .04); background-color: rgba(#000, .04); }
-
-.horizontal-rule-light {
-  @include box-shadow(#fff 0 1px 0);
-  border-bottom: 1px solid #bbb; }
-
-.horizontal-rule-top-light {
-  @include box-shadow(#fff 0 1px 0 inset);
-  border-top: 1px solid #bbb; }
-
-.vertical-rule-light {
-  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
-  border-right: 1px solid #bbb; }
-
-.vertical-rule-left-light {
-  @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
-  border-left: 1px solid #bbb; }
-
-.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
-
-.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }
-
-.syntax-switch-light {
-  color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
-  &:hover { color: #000; text-shadow: #fff 0 1px 0; }}
-
-.theme-switch-light {
-  cursor: pointer;
-  a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
-  &:hover a { color: #000; } }
-
-.heading-panel-light {
-  background: rgba(#fff, .5);
-  @include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
-  a:hover { color: #000;
-    .arg { color: rgba(#000, .6); } }
-}
-
-.selected-marker-light {
-  a:before{ border-bottom-color: #bbbbbb; }
-  &:before { border-bottom-color: #fff; }
-  &:after { border-bottom-color: #e5e5e5; }
-}
-
-.doc-panel-light {
-  background: rgba(#000, .03);
-  text-shadow: rgba(#fff, .9) 0 1px 1px;
-  @include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
-}
-
-.mixin-panel-light {
-  @extend .inset-panel-light;
-  background: rgba(#fff, .8);
-  td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
-  .container textarea { background: darken(#fff, .04); }
-}
-
-@mixin light-theme($docs: false) {
-  $page-bg: #ececec; // image-url('bg-light.jpg');
-
-  $text: #111;
-  $heading: #222;
-  $strong-text: #000;
-
-  $search: #666;
-
-  $link: #307eb6;
-  $nav-link: #444;
-  $code: #222;
-
-  $main-nav: #000;
-  $main-nav-selected: darken(#fb292d, 15);
-  $docs-nav-selected: $strong-text;
-  $module-nav-selected: $link;
-
-  $option-panel-border: rgba(#000, .2);
-  $option-panel-bg: #fff;
-
-  @include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
-
-  @if($docs){
-    @include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
-    .syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
-    .syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
-  }
-}

doc-src/content/stylesheets/partials/_typography.scss

@@ -1,47 +0,0 @@
-@font-face {
-  font-family: "pictos-web";
-  src: url('/otherfonts/pictos-web.eot');
-  src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');}
-
-@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot');
-
-
-.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
-.heading-font { font-family: 'Museo Sans', "museosans-web", 'serif'; }
-.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
-.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
-
-#page {
-  line-height: 1.45em;
-  ol { list-style: outside decimal; padding-left: 2.5em; }
-  ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
-  ul, ol, dl { margin-bottom: 1.5em;}
-  p { margin-bottom: 1.2em;}
-  #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
-  h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
-  h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
-  h3 { font-size: 18px; }
-  h4 { font-size: 18px; margin: .4em 0; }
-  ul { list-style: inside disc; }
-  dt { font-weight: bold; }
-}
-#page aside {
-  ul { list-style: none; margin-bottom: 1em;}
-  h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
-}
-em     { font-style: italic; }
-strong { font-weight: bold;  }
-
-#page > article {
-  ul ul { padding-left: 1em; }
-  position: relative;
-  h2 { font-size: 26px; margin: .5em 0 .6em;
-    padding: 1em 0 6px;}
-  hr + h2 { padding-top: 0; }
-  hr + h3, h4, h5 { margin-top: 0; }
-}
-
-dl.table dt, dl.table dd { display: inline-block; }
-dg { display: block; margin-bottom: 1.5em; }
-
-.warning { color: #c00; }

doc-src/content/stylesheets/syntax/_shCore.scss

@@ -1,216 +0,0 @@
-@mixin round_corners_custom($top, $right, $bottom, $left) {
-	-moz-border-radius: $top $right $bottom $left !important;
-	-webkit-border-radius: $top $right $bottom $left !important;
-}
-
-@mixin round_corners($radius) {
-	@include round_corners_custom($radius, $radius, $radius, $radius);
-}
-
-.syntaxhighlighter {
-	a,
-	div,
-	code,
-	table,
-	table td,
-	table tr,
-	table tbody,
-	table thead,
-	table caption,
-	textarea {
-		@include round_corners(0);
-		
-		background: none !important;
-		border: 0 !important;
-		bottom: auto !important;
-		float: none !important;
-		height: auto !important;
-		left: auto !important;
-		line-height: 1.1em !important;
-		margin: 0 !important;
-		outline: 0 !important;
-		overflow: visible !important;
-		padding: 0 !important;
-		position: static !important;
-		right: auto !important;
-		text-align: left !important;
-		top: auto !important;
-		vertical-align: baseline !important;
-		width: auto !important;
-		box-sizing: content-box !important;
-		font: {
-			family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
-			weight: normal !important;
-			style: normal !important;
-			size: 1em !important;
-		}
-		min: {
-			// For IE8, FF & WebKit
-			height: inherit !important;
-			// For IE7
-			height: auto !important;
-		}
-	}
-}
-
-.syntaxhighlighter {
-	width: 100% !important;
-	margin: 1em 0 1em 0 !important;
-	
-	position: relative !important;
-	overflow: auto !important;
-	font-size: 1em !important;
-	
-	&.source { overflow: hidden !important; }
-	
-	// set up bold and italic
-	.bold { font-weight: bold !important; }
-	.italic { font-style: italic !important; }
-	
-	.line { white-space: pre !important; }
-	
-	// main table and columns
-	table {
-		width: 100% !important;
-		caption {
-			text-align: left !important;
-			padding: .5em 0 0.5em 1em !important;
-		}
-		
-		td.code {
-			width: 100% !important;
-			
-			.container {
-				position: relative !important;
-				
-				textarea {
-					box-sizing: border-box !important;
-					position: absolute !important;
-					left: 0 !important;
-					top: 0 !important;
-					width: 100% !important;
-					height: 100% !important;
-					border: none !important;
-					background: white !important;
-					padding-left: 1em !important;
-					overflow: hidden !important;
-					white-space: pre !important;
-				} 
-			} 
-		}
-		
-		// middle spacing between line numbers and lines
-		td.gutter .line {
-			text-align: right !important;
-			padding: 0 0.5em 0 1em !important; 
-		}
-		
-		td.code .line {
-			padding: 0 1em !important;
-		}
-	}
-	
-	&.nogutter {
-		td.code {
-			.container textarea, .line { padding-left: 0em !important; }
-		}
-	}
-	
-	&.show { display: block !important; }
-	
-	// Adjust some properties when collapsed
-	&.collapsed {
-		table { display: none !important; }
-		
-		.toolbar {
-			padding: 0.1em 0.8em 0em 0.8em !important;
-			font-size: 1em !important;
-			position: static !important;
-			width: auto !important;
-			height: auto !important;
-			
-			span {
-				display: inline !important;
-				margin-right: 1em !important;
-				
-				a {
-					padding: 0 !important;
-					display: none !important;
-					&.expandSource { display: inline !important; } 
-				}
-			}
-		}
-	}
-	
-	// Styles for the toolbar
-	.toolbar {
-		position: absolute !important;
-		right: 1px !important;
-		top: 1px !important;
-		width: 11px !important;
-		height: 11px !important;
-		font-size: 10px !important;
-		z-index: 10 !important;
-		
-		span.title { display: inline !important; }
-		
-		a {
-			display: block !important;
-			text-align: center !important;
-			text-decoration: none !important;
-			padding-top: 1px !important;
-			
-			&.expandSource { display: none !important; }
-		}
-	}
-	
-	&.ie {
-		font-size: .9em !important;
-		padding: 1px 0 1px 0 !important;
-		
-		.toolbar {
-			line-height: 8px !important;
-			a {
-				padding-top: 0px !important;
-			}
-		}
-	}
-	
-	// Print view.
-	// Colors are based on the default theme without background.
-	&.printing {
-		.line.alt1 .content,
-		.line.alt2 .content,
-		.line.highlighted .number,
-		.line.highlighted.alt1 .content,
-		.line.highlighted.alt2 .content { background: none !important; }
-		
-		// Gutter line numbers
-		.line {
-			.number { color: #bbbbbb !important; }
-			// Add border to the lines
-			.content { color: black !important; }
-		}
-		
-		// Toolbar when visible
-		.toolbar { display: none !important; }
-		a { text-decoration: none !important; }
-		.plain, .plain a { color: black !important; }
-		.comments, .comments a { color: #008200 !important; }
-		.string, .string a { color: blue !important; }
-		.keyword {
-			color: #006699 !important;
-			font-weight: bold !important; 
-		}
-		.preprocessor { color: gray !important; }
-		.variable { color: #aa7700 !important; }
-		.value { color: #009900 !important; }
-		.functions { color: #ff1493 !important; }
-		.constants { color: #0066cc !important; }
-		.script { font-weight: bold !important; }
-		.color1, .color1 a { color: gray !important; }
-		.color2, .color2 a { color: #ff1493 !important; }
-		.color3, .color3 a { color: red !important; }
-		.break, .break a { color: black !important; }
-	}
-}

doc-src/content/stylesheets/syntax/_shThemeRDark.scss

@@ -1,113 +0,0 @@
-
-// Dark Theme
-
-$background: none;
-
-$line_highlighted_background:	#323E41;
-$line_highlighted_number:		#b9bdb6;
-
-$gutter_text:					#afafaf;
-$gutter_border_color:			rgba(#fff, .15);
-
-$toolbar_collapsed_a:			#5ba1cf;
-$toolbar_collapsed_a_hover:		#5ce638;
-$toolbar_collapsed_background:	#000;
-
-$toolbar_a:						#fff;
-$toolbar_a_hover:				#e0e8ff;
-
-$code_plain:					#dadbb1;
-$code_comments:					#878a85;
-$code_string:					#64b041;
-$code_keyword:					#6cc7eb;
-$code_preprocessor:				#cd5c57;
-$code_variable:					$code_keyword;
-$code_value:					#ffa0a0;
-$code_functions:				#3d95e6;
-$code_constants:				#e0e8ff;
-$code_script:					$code_keyword;
-$code_script_background:		none;
-$code_color1:					#b0b76b;
-$code_color2:					#98f77a;
-$code_color3:					#ffaa3e;
-$code_color4:					$code_plain;
-
-//@import "theme_template.scss";
-
-// Interface elements.
-html.dark .syntaxhighlighter {
-	// Actual syntax highlighter colors.
-	.plain, .plain a { color: $code_plain; }
-	.comments, .comments a { color: $code_comments; }
-	.string, .string a { color: $code_string; }
-	.keyword { color: $code_keyword; }
-	.preprocessor { color: $code_preprocessor; }
-	.variable { color: $code_variable; }
-	.value { color: $code_value; }
-	.functions { color: $code_functions; }
-	.constants { color: $code_constants; }
-	.script {
-		font-weight: bold;
-		color: $code_script;
-		background-color: $code_script_background;
-	}
-	.color1, .color1 a { color: $code_color1; }
-	.color2, .color2 a { color: $code_color2; }
-	.color3, .color3 a { color: $code_color3; }
-	.color4, .color4 a { color: $code_color4; }
-}
-
-// Light Theme
-
-$background: none;
-
-$line_highlighted_background:	#c3defe;
-$line_highlighted_number:		#fff;
-
-$gutter_text:					#787878;
-$gutter_border_color:			#d4d0c8;
-
-$toolbar_collapsed_a:			#3f5fbf;
-$toolbar_collapsed_a_hover:		#aa7700;
-$toolbar_collapsed_background:	#fff;
-
-$toolbar_a:						#a0a0a0;
-$toolbar_a_hover:				red;
-
-$code_plain:					black;
-$code_comments:					#3f5fbf;
-$code_string:					#4fa33f;
-$code_keyword:					#7f0055;
-$code_preprocessor:				#006699;
-$code_variable:					#aa7700;
-$code_value:					#4fa33f;
-$code_functions:				#b553ba;
-$code_constants:				#0066cc;
-$code_color1:					gray;
-$code_color2:					#ca6436;
-$code_color3:					red;
-$code_color4:					$code_plain;
-
-// Interface elements.
-html.light .syntaxhighlighter {
-	// Actual syntax highlighter colors.
-	.plain, .plain a { color: $code_plain; }
-	.comments, .comments a { color: $code_comments; }
-	.string, .string a { color: $code_string; }
-	.keyword { color: $code_keyword; }
-	.preprocessor { color: $code_preprocessor; }
-	.variable { color: $code_variable; }
-	.value { color: $code_value; }
-	.functions { color: $code_functions; }
-	.constants { color: $code_constants; }
-	.script {
-		font-weight: bold;
-		color: $code_script;
-		background-color: $code_script_background;
-	}
-	.color1, .color1 a { color: $code_color1; }
-	.color2, .color2 a { color: $code_color2; }
-	.color3, .color3 a { color: $code_color3; }
-	.color4, .color4 a { color: $code_color4; }
-}
-

doc-src/content/stylesheets/syntax/_syntax-theme.scss

@@ -1,8 +0,0 @@
-// Default Syntax Highlighter theme.
-//@import "shCore.scss";
-
-@import "shThemeRDark.scss";
-
-/*.syntaxhighlighter {
-	.keyword { font-weight: bold !important; }
-}*/

doc-src/content/stylesheets/syntax/_theme_template.scss

@@ -1,120 +0,0 @@
-$background:					white !default;
-
-$line_alt1_background:			$background !default;
-$line_alt2_background:			$background !default;
-
-$line_highlighted_background:	#e0e0e0 !default;
-$line_highlighted_number:		black !default;
-
-$gutter_text:					#afafaf !default;
-$gutter_border_color:			#6ce26c !default;
-$gutter_border:					3px solid $gutter_border_color !default;
-
-$toolbar_collapsed_a:			#00f !default;
-$toolbar_collapsed_a_hover:		#f00 !default;
-$toolbar_collapsed_background:	#fff !default;
-$toolbar_collapsed_border:		1px solid $gutter_border_color !default;
-
-$toolbar_a:						#fff !default;
-$toolbar_a_hover:				#000 !default;
-$toolbar_background:			$gutter_border_color !default;
-$toolbar_border:				none !default;
-
-$code_plain:					black !default;
-$code_comments:					#008200 !default;
-$code_string:					blue !default;
-$code_keyword:					#006699 !default;
-$code_preprocessor:				gray !default;
-$code_variable:					#aa7700 !default;
-$code_value:					#009900 !default;
-$code_functions:				#ff1493 !default;
-$code_constants:				#0066cc !default;
-$code_script:					$code_keyword !default;
-$code_script_background:		none !default;
-$code_color1:					gray !default;
-$code_color2:					#ff1493 !default;
-$code_color3:					red !default;
-
-$caption_color:					$code_plain !default;
-
-// Interface elements.
-.syntaxhighlighter {
-	background-color: $background !important;
-
-	// Highlighed line number
-	.line {
-		&.alt1 { background-color: $line_alt1_background !important; }
-		&.alt2 { background-color: $line_alt2_background !important; }
-
-		// Highlighed line
-		&.highlighted {
-			&.alt1, &.alt2 { background-color: $line_highlighted_background !important; }
-			&.number { color: $line_highlighted_number !important; }
-		}
-	}
-
-	table {
-		caption {
-			color: $caption_color !important;
-		}
-	}
-
-	// Add border to the lines
-	.gutter {
-		color: $gutter_text !important;
-		.line {
-			border-right: $gutter_border !important;
-
-			&.highlighted {
-				background-color: $gutter_border_color !important;
-				color: $background !important;
-			}
-		}
-	}
-
-	&.printing .line .content { border: none !important; }
-
-	&.collapsed {
-		overflow: visible !important;
-
-		.toolbar {
-			color: $toolbar_collapsed_a !important;
-			background: $toolbar_collapsed_background !important;
-			border: $toolbar_collapsed_border !important;
-
-			a {
-				color: $toolbar_collapsed_a !important;
-				&:hover { color: $toolbar_collapsed_a_hover !important; }
-			}
-		}
-	}
-
-	.toolbar {
-		color: $toolbar_a !important;
-		background: $toolbar_background !important;
-		border: $toolbar_border !important;
-		a {
-			color: $toolbar_a !important;
-			&:hover { color: $toolbar_a_hover !important; }
-		}
-	}
-
-	// Actual syntax highlighter colors.
-	.plain, .plain a { color: $code_plain !important; }
-	.comments, .comments a { color: $code_comments !important; }
-	.string, .string a { color: $code_string !important; }
-	.keyword { color: $code_keyword !important; }
-	.preprocessor { color: $code_preprocessor !important; }
-	.variable { color: $code_variable !important; }
-	.value { color: $code_value !important; }
-	.functions { color: $code_functions !important; }
-	.constants { color: $code_constants !important; }
-	.script {
-		font-weight: bold !important;
-		color: $code_script !important;
-		background-color: $code_script_background !important;
-	}
-	.color1, .color1 a { color: $code_color1 !important; }
-	.color2, .color2 a { color: $code_color2 !important; }
-	.color3, .color3 a { color: $code_color3 !important; }
-}

doc-src/layouts/partials/example.haml

@@ -4,7 +4,7 @@
 %h1 Demo: #{@item[:title]}
 #demo= example_html
 
-= yield
+= yield if block_given?
 
 #how
   %section#markup

doc-src/layouts/reference.haml

@@ -8,7 +8,7 @@
   %p.beta
     This module is fairly new and is currently in BETA (β).
 
-= yield
+= yield if block_given?
 
 %p
   This file can be imported using:

doc-src/lib/default.rb

@@ -1,6 +1,7 @@
 # All files in the 'lib' directory will be loaded
 # before nanoc starts compiling.
-
+require 'erb'
+require 'active_support/inflector'
 include Nanoc3::Helpers::LinkTo
 include Nanoc3::Helpers::Capturing
 include Nanoc3::Helpers::Rendering
@@ -137,3 +138,16 @@ def long_compass_version
   require 'compass/commands'
   Compass::Commands::PrintVersion.long_output_string
 end
+
+
+def sprite_tutorial_links(index=false)
+  string = <<-ERB
+<% unless  index %>
+  * [Sprite Tutorial Index](/help/tutorials/spriting/)
+<% end  %>
+<% Dir["./content/help/tutorials/spriting/**/*.markdown"].sort.each  do |file| %>
+  * [<%= File.basename(file, '.markdown').gsub('-', ' ').titleize %>](/help/tutorials/spriting/<%= File.basename(file, '.markdown') %>)
+<% end  %>
+  ERB
+  ::ERB.new(string).result(binding)
+end

examples/downloader.rb

@@ -9,8 +9,9 @@ def fetch(uri_str, limit = 10)
 
   url = URI.parse(uri_str)
   http = Net::HTTP.new(url.host, url.port)
-  http.open_timeout = 2
+  http.open_timeout = 10
   http.read_timeout = 30
+  http.use_ssl = true
   response = http.start do |http|
      puts "getting #{url.path}"
      http.request_get(url.path)
@@ -25,7 +26,7 @@ def fetch(uri_str, limit = 10)
 end
 
 def install_from_github(user, project, ext_name, branch = "master", working_directory = Dir.pwd)
-  download_link = "http://github.com/#{user}/#{project}/zipball/#{branch}"
+  download_link = "https://github.com/#{user}/#{project}/zipball/#{branch}"
   extdir = File.join(working_directory,'extensions')
   
   if !File.exists?("#{extdir}/#{ext_name}")

examples/ninesixty/bootstrap.rb

@@ -1,4 +1,4 @@
 require File.join(File.dirname(__FILE__), '..', 'downloader')
 
-install_from_github('chriseppstein', 'compass-960-plugin', 'ninesixty')
+install_from_github('nextmat', 'compass-960-plugin', 'ninesixty')
 

features/command_line.feature

@@ -200,7 +200,7 @@ Feature: Command Line
       | tmp/box_shadow.css          |
       | tmp/columns.css             |
       | tmp/fonts.css               |
-      | images/flag-s03c3b29b35.png |
+      | images/flag-s8c3c755a68.png |
     And the following files are removed:
       | .sass-cache/                |
       | tmp/border_radius.css       |
@@ -208,7 +208,7 @@ Feature: Command Line
       | tmp/box_shadow.css          |
       | tmp/columns.css             |
       | tmp/fonts.css               |
-      | images/flag-s03c3b29b35.png |
+      | images/flag-s8c3c755a68.png |
 
   Scenario: Watching a project for changes
     Given ruby supports fork

features/step_definitions/command_line_steps.rb

@@ -133,6 +133,7 @@ end
 
 Then "the following files are reported removed:" do |table|
   table.rows.each do |css_file|
+    #need to find a better way but this works for now
     Then %Q{a css file #{css_file.first} is reported removed}
   end
 end

frameworks/compass/stylesheets/compass/css3/_font-face.scss

@@ -6,6 +6,8 @@
 // * $font-files is required using font-files('relative/location', 'format').
 //   for best results use this order: woff, opentype/truetype, svg
 // * $eot is required by IE, and is a relative location of the eot file.
+// * $weight shows if the font is bold, defaults to normal
+// * $style defaults to normal, might be also italic
 // * For android 2.2 Compatiblity, please ensure that your web page has
 //   a meta viewport tag.
 // * To support iOS < 4.2, an SVG file must be provided
@@ -13,13 +15,20 @@
 // If you need to generate other formats check out the Font Squirrel
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 //
-// Example:
-//
-//     @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot")
+
+// In order to refer to a specific style of the font in your stylesheets as 
+// e.g. "font-style: italic;",  you may add a couple of @font-face includes
+// containing the respective font files for each style and specying
+// respective the $style parameter.
+
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
 @mixin font-face(
   $name, 
   $font-files, 
-  $eot: false
+  $eot: false,
+  $weight: false,
+  $style: false
 ) {
   $iefont: unquote("#{$eot}?iefix");
   @font-face {
@@ -29,5 +38,26 @@
       $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
     }
     src: $font-files;
+    @if $weight {
+      font-weight: $weight;
+    }
+    @if $style {
+      font-style: $style;
+    }
   }
 }
+
+// EXAMPLE
+// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot", bold, italic)
+//
+// will generate:
+//
+//   @font-face { 
+//     font-family: 'this name'; 
+//     src: url('fonts/this.eot'); 
+//     src: local("☺"),
+//       url('fonts/this.otf') format('woff'), 
+//       url('fonts/this.woff') format('opentype'); 
+//     font-weight: bold;
+//     font-style: italic;
+//   }

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);
       }
     }
   }

lib/compass/actions.rb

@@ -65,6 +65,7 @@ module Compass
     end
 
     def remove(file_name)
+      file_name ||= ''
       if File.directory?(file_name)
         FileUtils.rm_rf file_name
         log_action :remove, basename(file_name)+"/", options

lib/compass/app_integration/rails.rb

@@ -24,8 +24,10 @@ module Compass
       end
 
       def configuration
-        Compass::Configuration::Data.new('rails').
-          extend(ConfigurationDefaults)
+        config = Compass::Configuration::Data.new('rails')
+        config.extend(ConfigurationDefaults)
+        config.extend(ConfigurationDefaultsWithAssetPipeline) if Sass::Util.ap_geq?('3.1.0') || Sass::Util.ap_geq?('3.1.0.rc') || Sass::Util.ap_geq?('3.1.0.beta')
+        config
       end
 
       def env
@@ -48,17 +50,32 @@ module Compass
         end
       end
 
-      def initialize!(config = nil)
+      def check_for_double_boot!
         if booted?
-          Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your intializer.")
+          Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your initializer.")
         else
           booted!
         end
+      end
+
+      def sass_plugin_enabled?
+        unless Sass::Util.ap_geq?('3.1.0.beta')
+          defined?(Sass::Plugin) && !Sass::Plugin.options[:never_update]
+        end
+      end
+
+      def rails_compilation_enabled?
+        Sass::Util.ap_geq?('3.1.0.beta') && defined?(Sass::Rails) # XXX check if there's some other way(s) to disable the asset pipeline.
+      end
+
+      # Rails 2.x projects use this in their compass initializer.
+      def initialize!(config = nil)
+        check_for_double_boot!
         config ||= Compass.detect_configuration_file(root)
         Compass.add_project_configuration(config, :project_type => :rails)
         Compass.discover_extensions!
         Compass.configure_sass_plugin!
-        Compass.handle_configuration_change!
+        Compass.handle_configuration_change! if sass_plugin_enabled? || rails_compilation_enabled?
       end
     end
   end

lib/compass/app_integration/rails/actionpack2x.rb

@@ -0,0 +1,10 @@
+%w(action_controller sass_plugin urls).each do |lib|
+  require "compass/app_integration/rails/actionpack2x/#{lib}"
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+  private
+  include ActionView::Helpers::AssetTagHelper
+end

lib/compass/app_integration/rails/actionpack30.rb

@@ -0,0 +1,11 @@
+# TODO figure something out so image_path works with rails integration
+%w(railtie).each do |lib|
+  require "compass/app_integration/rails/actionpack30/#{lib}"
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+  private
+  include ActionView::Helpers::AssetTagHelper
+end

lib/compass/app_integration/rails/actionpack31.rb

@@ -0,0 +1,5 @@
+# TODO figure something out so image_path works with rails integration
+%w(railtie helpers).each do |lib|
+  require "compass/app_integration/rails/actionpack31/#{lib}"
+end
+

lib/compass/app_integration/rails/actionpack31/helpers.rb

@@ -0,0 +1,26 @@
+module Sass::Script::Functions
+  def generated_image_url(path, only_path = nil)
+    asset_url(path, Sass::Script::String.new("image"))
+  end
+end
+
+
+module Compass::RailsImageFunctionPatch
+  private
+  
+  def image_path(image_file)
+    if file = ::Rails.application.assets.find_asset(image_file)
+      return file
+    end
+    super(image_file)
+  end
+end
+
+module Sass::Script::Functions
+  include Compass::RailsImageFunctionPatch
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+end

lib/compass/app_integration/rails/actionpack31/railtie.rb

@@ -0,0 +1,89 @@
+require 'compass'
+require 'rails'
+
+class Rails::Railtie::Configuration
+  # Adds compass configuration accessor to the application configuration.
+  #
+  # If a configuration file for compass exists, it will be read in and
+  # the project's configuration values will already be set on the config
+  # object.
+  #
+  # For example:
+  #
+  #     module MyApp
+  #       class Application < Rails::Application
+  #          config.compass.line_comments = !Rails.env.production?
+  #          config.compass.fonts_dir = "app/assets/fonts"
+  #       end
+  #     end
+  #
+  # It is suggested that you create a compass configuration file if you
+  # want a quicker boot time when using the compass command line tool.
+  #
+  # For more information on available configuration options see:
+  # http://compass-style.org/help/tutorials/configuration-reference/
+  def compass
+    @compass ||= begin
+      data = if (config_file = Compass.detect_configuration_file) && (config_data = Compass.configuration_for(config_file))
+        config_data
+      else
+        Compass::Configuration::Data.new("rails_config")
+      end
+      data.project_type = :rails # Forcing this makes sure all the rails defaults will be loaded.
+      Compass.add_project_configuration(data)
+      Compass.configuration.on_sprite_saved do |filename|
+        # This is a huge hack based on reading through the sprockets internals.
+        # Sprockets needs an API for adding assets during precompilation.
+        # At a minimum sprockets should provide this API:
+        #
+        #     #filename is a path in the asset source directory
+        #     Rails.application.assets.new_asset!(filename)
+        #
+        #     # logical_path is how devs refer to it, data is the contents of it.
+        #     Rails.application.assets.new_asset!(logical_path, data)
+        #
+        # I would also like to select one of the above calls based on whether
+        # the user is precompiling or not:
+        #
+        #     Rails.application.assets.precompiling? #=> true or false
+        #
+        # But even the above is not an ideal API. The issue is that compass sprites need to
+        # avoid generation if the sprite file is already generated (which can be quite time
+        # consuming). To do this, compass has it's own uniqueness hash based on the user's
+        # inputs instead of being based on the file contents. So if we could provide our own
+        # hash or some metadata that is opaque to sprockets that could be read from the
+        # asset's attributes, we could avoid cluttering the assets directory with generated
+        # sprites and always just use the logical_path + data version of the api.
+        if Rails.application.config.action_controller.perform_caching
+          asset         = Rails.application.assets.find_asset(filename)
+          pathname      = Pathname.new(filename)
+          logical_path  = filename[(Compass.configuration.generated_images_path.length+1)..-1]
+          # Force the asset into the cache so find_asset will find it.
+          cached_assets = Rails.application.assets.instance_variable_get("@assets")
+          cached_assets[logical_path] = cached_assets[filename] = asset
+          if File.directory?(Rails.application.assets.static_root)
+            # Copy the asset into the static root so the browsers will find it.
+            asset_attributes = Rails.application.assets.attributes_for(logical_path)
+            digest_path      = asset_attributes.path_with_fingerprint(asset.digest)
+            static_path      = Rails.application.assets.static_root.join(digest_path)
+            asset.write_to(static_path)
+          end
+        end
+      end
+      data
+    end
+    @compass
+  end
+end
+
+module Compass
+  class Railtie < Rails::Railtie
+    initializer "compass.initialize_rails" do |app|
+      # Configure compass for use within rails, and provide the project configuration
+      # that came via the rails boot process.
+      Compass::AppIntegration::Rails.check_for_double_boot!
+      Compass.discover_extensions!
+      Compass.configure_rails!(app)
+    end
+  end
+end

lib/compass/app_integration/rails/configuration_defaults.rb

@@ -1,6 +1,52 @@
 module Compass
   module AppIntegration
     module Rails
+
+      module ConfigurationDefaultsWithAssetPipeline
+        # These methods overwrite the old rails defaults
+        # when rails 3.1 is detected.
+
+        def default_sass_dir
+          File.join("app", "assets", "stylesheets")
+        end
+
+        def default_images_dir
+          File.join("app", "assets", "images")
+        end
+
+        def default_fonts_dir
+          File.join("app", "assets", "fonts")
+        end
+
+        def default_javascripts_dir
+          File.join("app", "assets", "javascripts")
+        end
+
+        def default_http_path
+          ::Rails.application.config.assets.prefix
+        end
+
+        def default_http_images_path
+          "#{top_level.http_path}"
+        end
+
+        def default_http_generated_images_path
+          "#{top_level.http_path}"
+        end
+
+        def default_http_javascripts_path
+          "#{top_level.http_path}"
+        end
+
+        def default_http_fonts_path
+          "#{top_level.http_path}"
+        end
+
+        def default_http_stylesheets_path
+          "#{top_level.http_path}"
+        end
+      end
+
       module ConfigurationDefaults
 
         def project_type_without_default
@@ -8,12 +54,8 @@ module Compass
         end
 
         def default_sass_dir
-          if Sass::Util.ap_geq?('3.1.0.beta')
-            File.join("app", "assets", "stylesheets")
-          else
           File.join("app", "stylesheets")
         end
-        end
 
         def default_css_dir
           File.join("public", "stylesheets")
@@ -28,27 +70,25 @@ module Compass
         end
 
         def default_javascripts_dir
-          if Sass::Util.ap_geq?('3.1.0.beta')
-            File.join("app", "assets", "javascripts")
-          else
           File.join("public", "javascripts")
         end
-        end
 
         def default_http_images_path
-          "#{top_level.http_path}images"
+          # Relies on the fact that this will be loaded after the "normal"
+          # defaults, so that method_missing finds http_root_relative
+          http_root_relative "images"
         end
 
         def default_http_javascripts_path
-          "#{top_level.http_path}javascripts"
+          http_root_relative "javascripts"
         end
 
         def default_http_fonts_path
-          "#{top_level.http_path}fonts"
+          http_root_relative "fonts"
         end
 
         def default_http_stylesheets_path
-          "#{top_level.http_path}stylesheets"
+          http_root_relative "stylesheets"
         end
 
         def default_extensions_dir

lib/compass/app_integration/rails/runtime.rb

@@ -3,25 +3,15 @@ unless defined?(Compass::RAILS_LOADED)
   begin
     require 'action_pack/version'
     if ActionPack::VERSION::MAJOR >= 3
-      # TODO figure something out so image_path works with rails integration
-      %w(railtie).each do |lib|
-        require "compass/app_integration/rails/actionpack3/#{lib}"
+      if ActionPack::VERSION::MINOR < 1
+        require 'compass/app_integration/rails/actionpack30'
+      else
+        require 'compass/app_integration/rails/actionpack31'
       end
     else
-      %w(action_controller sass_plugin urls).each do |lib|
-        require "compass/app_integration/rails/actionpack2/#{lib}"
+      require 'compass/app_integration/rails/actionpack2x'
     end
-    end
-  rescue LoadError => e
+  rescue LoadError, NameError
     $stderr.puts "Compass could not access the rails environment."
-  rescue NameError => e
-    $stderr.puts "Compass could not access the rails environment."
-  end
-  
-  # Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
-  class Sass::Script::Functions::EvaluationContext
-    include Sass::Script::Functions
-    private
-    include ActionView::Helpers::AssetTagHelper
   end
 end

lib/compass/commands/clean_project.rb

@@ -30,7 +30,7 @@ module Compass
       def perform
         compiler = new_compiler_instance
         compiler.clean!
-        Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.images_path).each do |sprite|
+        Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.generated_images_path).each do |sprite|
           remove sprite
         end
       end

lib/compass/commands/sprite.rb

@@ -39,10 +39,11 @@ module Compass
 
       def perform
         relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
-        sprites = Compass::SpriteImporter.new(:uri => relative_uri, :options => Compass.sass_engine_options)
-        options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{sprites.name}.#{Compass.configuration.preferred_syntax}")
+        name = Compass::SpriteImporter.sprite_name(relative_uri)
+        sprites = Compass::SpriteImporter.new
+        options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{name}.#{Compass.configuration.preferred_syntax}")
         options[:skip_overrides] ||= false
-        contents = sprites.content_for_images(options[:skip_overrides])
+        contents = Compass::SpriteImporter.content_for_images(relative_uri, name, options[:skip_overrides])
         if options[:output_file][-4..-1] != "scss"
           contents = Sass::Engine.new(contents, Compass.sass_engine_options.merge(:syntax => :scss)).to_tree.to_sass
         end

lib/compass/compiler.rb

@@ -138,7 +138,7 @@ module Compass
       end
       duration = options[:time] ? "(#{(css_content.__duration * 1000).round / 1000.0}s)" : ""
       write_file(css_filename, css_content, options.merge(:force => true, :extra => duration))
-      Compass.configuration.run_callback(:stylesheet_saved, css_filename)
+      Compass.configuration.run_stylesheet_saved(css_filename)
     end
 
     def should_compile?(sass_filename, css_filename)
@@ -159,7 +159,7 @@ module Compass
       formatted_error = "(Line #{e.sass_line}: #{e.message})"
       file = basename(sass_filename)
       logger.record :error, file, formatted_error
-      Compass.configuration.run_callback(:stylesheet_error, sass_filename, formatted_error)
+      Compass.configuration.run_stylesheet_error(sass_filename, formatted_error)
       write_file css_filename, error_contents(e, sass_filename), options.merge(:force => true)
     end
 

lib/compass/configuration.rb

@@ -20,10 +20,12 @@ module Compass
       attributes_for_directory(:css, :stylesheets),
       attributes_for_directory(:sass, nil),
       attributes_for_directory(:images),
+      attributes_for_directory(:generated_images),
       attributes_for_directory(:javascripts),
       attributes_for_directory(:fonts),
       attributes_for_directory(:extensions, nil),
       # Compilation options
+      :sprite_load_path,
       :output_style,
       :environment,
       :relative_assets,

lib/compass/configuration/comments.rb

@@ -4,7 +4,11 @@ module Compass
     module Comments
 
       def comment_for_http_path
-        "# Set this to the root of your project when deployed:\n"
+        unless top_level.http_path_without_default
+          "# Set this to the root of your project when deployed:\nhttp_path = #{top_level.http_path.to_s.inspect}\n"
+        else
+          ""
+        end
       end
 
       def comment_for_relative_assets

lib/compass/configuration/data.rb

@@ -18,12 +18,38 @@ module Compass
     class Data
 
       attr_reader :name
+      extend Sass::Callbacks
+
 
       include Compass::Configuration::Inheritance
       include Compass::Configuration::Serialization
       include Compass::Configuration::Adapters
       extend  Compass::Configuration::Paths
 
+      # on_sprite_saved
+      # yields the filename
+      # usage: on_sprite_saved {|filename| do_something(filename) }
+      define_callback :sprite_saved
+      chained_method :run_sprite_saved
+
+      # on_sprite_generated
+      # yields 'ChunkyPNG::Image'
+      # usage: on_sprite_generated {|sprite_data| do_something(sprite_data) }
+      define_callback :sprite_generated
+      chained_method :run_sprite_generated
+
+      # on_stylesheet_saved
+      # yields the filename
+      # usage: on_stylesheet_saved {|filename| do_something(filename) }
+      define_callback :stylesheet_saved
+      chained_method :run_stylesheet_saved
+
+      # on_stylesheet_error
+      # yields the filename & message
+      # usage: on_stylesheet_error {|filename, message| do_something(filename, message) }
+      define_callback :stylesheet_error
+      chained_method :run_stylesheet_error
+
       inherited_accessor *ATTRIBUTES
       inherited_accessor :required_libraries, :loaded_frameworks, :framework_path #XXX we should make these arrays add up cumulatively.
 
@@ -138,16 +164,6 @@ module Compass
         relative_assets || http_images_path == :relative
       end
 
-      def run_callback(event, *args)
-        begin
-          send(:"run_#{event}", *args)
-        rescue NoMethodError => e
-          unless e.message =~ /run_#{event}/
-            raise
-          end
-        end
-      end
-
       private
 
       def assert_valid_keys!(attr_hash)

lib/compass/configuration/defaults.rb

@@ -10,7 +10,7 @@ module Compass
         :stand_alone
       end
 
-      def http_path_without_default
+      def default_http_path
         "/"
       end
 
@@ -60,6 +60,14 @@ module Compass
         end
       end
 
+      def default_generated_images_path
+        if (pp = top_level.project_path) && (dir = top_level.generated_images_dir)
+          Compass.projectize(dir, pp)
+        else
+          top_level.images_path
+        end
+      end
+
       def default_javascripts_path
         if (pp = top_level.project_path) && (dir = top_level.javascripts_dir)
           Compass.projectize(dir, pp)
@@ -84,11 +92,22 @@ module Compass
         end
       end
 
+      def default_generated_images_dir
+        top_level.images_dir
+      end
+
+      def default_http_generated_images_dir
+        top_level.http_images_dir
+      end
 
       def default_http_images_dir
         top_level.images_dir
       end
       
+      def default_sprite_load_path
+        [top_level.images_path]
+      end
+
       def default_http_images_path
         http_root_relative top_level.http_images_dir
       end
@@ -101,6 +120,10 @@ module Compass
         http_root_relative top_level.http_stylesheets_dir
       end
 
+      def default_http_generated_images_path
+        http_root_relative top_level.http_generated_images_dir
+      end
+
       def default_http_fonts_dir
         if fd = top_level.fonts_dir_without_default
           fd

lib/compass/configuration/file_data.rb

@@ -1,28 +1,6 @@
 module Compass
   module Configuration
     class FileData < Data
-      extend Sass::Callbacks
-
-      # on_sprite_generated
-      # yields the filename
-      # usage: on_sprite_save {|filename| do_somethign(filename) }
-      define_callback :sprite_saved
-
-      # on_sprite_generated
-      # yields 'ChunkyPNG::Image'
-      # usage: on_sprite_generated {|sprite_data| do_something(sprite_data) }
-      define_callback :sprite_generated
-
-      # on_stylesheet_saved
-      # yields the filename
-      # usage: on_stylesheet_saved {|filename| do_something(filename) }
-      define_callback :stylesheet_saved
-
-      # on_stylesheet_error
-      # yields the filename & message
-      # usage: on_stylesheet_error {|filename, message| do_something(filename, message) }
-      define_callback :stylesheet_error
-
       def self.new_from_file(config_file, defaults = nil)
         data = new(config_file)
         data.with_defaults(defaults) do

lib/compass/configuration/helpers.rb

@@ -68,15 +68,22 @@ module Compass
         end
         unless @callbacks_loaded
           Sass::Plugin.on_updating_stylesheet do |sass_file, css_file|
-            Compass.configuration.run_callback(:stylesheet_saved, css_file)
+            Compass.configuration.run_stylesheet_saved(css_file)
           end
           Sass::Plugin.on_compilation_error do |e, filename, css|
-            Compass.configuration.run_callback(:stylesheet_error, filename, e.message)
+            Compass.configuration.run_stylesheet_error(filename, e.message)
           end
           @callbacks_loaded = true
         end
       end
 
+      def configure_rails!(app)
+        return unless app.config.respond_to?(:sass)
+        app.config.compass.to_sass_engine_options.each do |key, value|
+          app.config.sass.send(:"#{key}=", value)
+        end
+      end
+
       def sass_engine_options
         configuration.to_sass_engine_options
       end

lib/compass/configuration/inheritance.rb

@@ -61,6 +61,19 @@ module Compass
           inherited_writer(*attributes)
         end
 
+        def chained_method(method)
+          line = __LINE__ + 1
+          class_eval %Q{
+            alias_method :_chained_#{method}, method
+            def #{method}(*args, &block)
+              _chained_#{method}(*args, &block)
+              if inherited_data
+                inherited_data.#{method}(*args, &block)
+              end
+            end
+          }, __FILE__, line
+        end
+
         
       end
 

lib/compass/configuration/serialization.rb

@@ -27,6 +27,7 @@ module Compass
         if @added_import_paths
           self.additional_import_paths ||= []
           self.additional_import_paths += @added_import_paths
+          self.additional_import_paths.uniq!
         end
         issue_deprecation_warnings
       end

lib/compass/sass_extensions/functions/font_files.rb

@@ -1,10 +1,39 @@
 module Compass::SassExtensions::Functions::FontFiles
+  FONT_TYPES = {
+    :woff => 'woff',
+    :otf => 'opentype',
+    :opentype => 'opentype',
+    :ttf => 'truetype',
+    :truetype => 'truetype',
+    :svg => 'svg'
+  }
+
   def font_files(*args)
-    raise Sass::SyntaxError, "An even number of arguments must be passed to font_files()" unless args.size % 2 == 0
     files = []
-    while args.size > 0
-      files << "#{font_url(args.shift)} format('#{args.shift}')"
+    args_length = args.length
+    skip_next = false
+
+    args.each_with_index do |arg, index|
+      if skip_next
+        skip_next = false
+        next
       end
+
+      type = (args_length > (index + 1)) ? args[index + 1].value.to_sym : :wrong
+
+      if FONT_TYPES.key? type
+        skip_next = true
+      else
+        type = arg.to_s.split('.').last.gsub('"', '').to_sym
+      end
+
+      if FONT_TYPES.key? type
+        files << "#{font_url(arg)} format('#{FONT_TYPES[type]}')"
+      else
+        raise Sass::SyntaxError, "Could not determine font type for #{arg}"
+      end
+    end
+
     Sass::Script::String.new(files.join(", "))
   end
 end

lib/compass/sass_extensions/functions/image_size.rb

@@ -1,15 +1,13 @@
 module Compass::SassExtensions::Functions::ImageSize
   # Returns the width of the image relative to the images directory
   def image_width(image_file)
-    image_path = real_path(image_file)
-    width = ImageProperties.new(image_path).size.first
+    width, _ = image_demensions(image_file)
     Sass::Script::Number.new(width,["px"])
   end
   
   # Returns the height of the image relative to the images directory
   def image_height(image_file)
-    image_path = real_path(image_file)
-    height = ImageProperties.new(image_path).size.last
+    _, height = image_demensions(image_file)
     Sass::Script::Number.new(height, ["px"])
   end
 
@@ -45,13 +43,26 @@ module Compass::SassExtensions::Functions::ImageSize
   end
 
 private
+
+  def image_demensions(image_file)
+    options[:compass] ||= {}
+    options[:compass][:image_dimensions] ||= {}
+    options[:compass][:image_dimensions][image_file.value] = ImageProperties.new(image_path_for_size(image_file.value)).size
+  end
+  
+  def image_path_for_size(image_file)
+    if File.exists?(image_file)
+      return image_file 
+    end
+    real_path(image_file)
+  end
+
   def real_path(image_file)
-    path = image_file.value
     # Compute the real path to the image on the file stystem if the images_dir is set.
     if Compass.configuration.images_path
-      File.join(Compass.configuration.images_path, path)
+      File.join(Compass.configuration.images_path, image_file)
     else
-      File.join(Compass.configuration.project_path, path)
+      File.join(Compass.configuration.project_path, image_file)
     end
   end
 

lib/compass/sass_extensions/functions/inline_image.rb

@@ -12,7 +12,7 @@ module Compass::SassExtensions::Functions::InlineImage
     while args.size > 0
       path = args.shift.value
       real_path = File.join(Compass.configuration.fonts_path, path)
-      url = "url('data:#{compute_mime_type(path)};base64,#{data(real_path)}')"
+      url = inline_image_string(data(real_path), compute_mime_type(path))
       files << "#{url} format('#{args.shift}')"
     end
     Sass::Script::String.new(files.join(", "))

lib/compass/sass_extensions/functions/sprites.rb

@@ -61,7 +61,7 @@ module Compass::SassExtensions::Functions::Sprites
     verify_map(map, "sprite")
     verify_sprite(sprite)
     if image = map.image_for(sprite.value)
-      Sass::Script::String.new(image.relative_file)
+      Sass::Script::String.new(image.file)
     else
       missing_image!(map, sprite)
     end
@@ -96,9 +96,7 @@ module Compass::SassExtensions::Functions::Sprites
   def sprite_url(map)
     verify_map(map, "sprite-url")
     map.generate
-    image_url(Sass::Script::String.new("#{map.path}-s#{map.uniqueness_hash}.png"),
-              Sass::Script::Bool.new(false),
-              Sass::Script::Bool.new(false))
+    generated_image_url(Sass::Script::String.new("#{map.path}-s#{map.uniqueness_hash}.png"))
   end
   Sass::Script::Functions.declare :sprite_url, [:map]
 
@@ -147,7 +145,7 @@ module Compass::SassExtensions::Functions::Sprites
   Sass::Script::Functions.declare :sprite_position, [:map, :sprite, :offset_x, :offset_y]
 
   def sprite_image(*args)
-    raise Sass::SyntaxError, %Q(The sprite-image() function has been replaced by sprite(). See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
+    raise Sass::SyntaxError, %Q(The sprite-image() function has been replaced by sprite(). See http://compass-style.org/help/tutorials/spriting/ for more information.)
   end
 
 protected

lib/compass/sass_extensions/functions/trig.rb

@@ -19,9 +19,10 @@ module Compass::SassExtensions::Functions::Trig
   private
   def trig(operation, number)
     if number.numerator_units == ["deg"] && number.denominator_units == []
-      Sass::Script::Number.new(Math.send(operation, Math::PI * number.value / 360))
+      Sass::Script::Number.new(Math.send(operation, (number.value * Math::PI / 180)))
     else
       Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
     end
   end
+  
 end

lib/compass/sass_extensions/functions/urls.rb

@@ -1,5 +1,24 @@
 module Compass::SassExtensions::Functions::Urls
 
+
+  def self.has?(base, instance_method)
+    Sass::Util.has?(:instance_method, base, instance_method)
+  end
+
+  def self.included(base)
+    base.send(:include, StylesheetUrl) unless has?(base, :stylesheet_url)
+    base.send(:include, FontUrl) unless has?(base, :font_url)
+    base.send(:include, ImageUrl) unless has?(base, :image_url)
+    base.send(:include, GeneratedImageUrl) unless has?(base, :generated_image_url)
+  end
+
+  module StylesheetUrl
+    def self.included(base)
+      if base.respond_to?(:declare)
+        base.declare :stylesheet_url, [:path]
+        base.declare :stylesheet_url, [:path, :only_path]
+      end
+    end
     def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
       # Compute the path to the stylesheet, either root relative or stylesheet relative
       # or nil if the http_images_path is not set in the configuration.
@@ -18,9 +37,15 @@ module Compass::SassExtensions::Functions::Urls
         clean_url(path)
       end
     end
-  Sass::Script::Functions.declare :stylesheet_url, [:path]
-  Sass::Script::Functions.declare :stylesheet_url, [:path, :only_path]
+  end
 
+  module FontUrl
+    def self.included(base)
+      if base.respond_to?(:declare)
+        base.declare :font_url,       [:path]
+        base.declare :font_url,       [:path, :only_path]
+      end
+    end
     def font_url(path, only_path = Sass::Script::Bool.new(false))
       path = path.value # get to the string value of the literal.
 
@@ -45,9 +70,16 @@ module Compass::SassExtensions::Functions::Urls
         clean_url(path)
       end
     end
-  Sass::Script::Functions.declare :font_url, [:path]
-  Sass::Script::Functions.declare :font_url, [:path, :only_path]
+  end
 
+  module ImageUrl
+    def self.included(base)
+      if base.respond_to?(:declare)
+        base.declare :image_url,      [:path]
+        base.declare :image_url,      [:path, :only_path]
+        base.declare :image_url,      [:path, :only_path, :cache_buster]
+      end
+    end
     def image_url(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
       path = path.value # get to the string value of the literal.
 
@@ -104,9 +136,68 @@ module Compass::SassExtensions::Functions::Urls
         clean_url(path)
       end
     end
-  Sass::Script::Functions.declare :image_url, [:path]
-  Sass::Script::Functions.declare :image_url, [:path, :only_path]
-  Sass::Script::Functions.declare :image_url, [:path, :only_path, :cache_buster]
+  end
+
+  module GeneratedImageUrl
+    def self.included(base)
+      if base.respond_to?(:declare)
+        base.declare :generated_image_url, [:path]
+        base.declare :generated_image_url, [:path, :cache_buster]
+      end
+    end
+    def generated_image_url(path, cache_buster = Sass::Script::Bool.new(false))
+      path = path.value # get to the string value of the literal.
+
+      if path =~ %r{^#{Regexp.escape(Compass.configuration.http_generated_images_path)}/(.*)}
+        # Treat root relative urls (without a protocol) like normal if they start with
+        # the generated_images path.
+        path = $1
+      elsif absolute_path?(path)
+        # Short curcuit if they have provided an absolute url.
+        return Sass::Script::String.new("url(#{path})")
+      end
+
+      # Compute the path to the image, either root relative or stylesheet relative
+      # or nil if the http_generated_images_path is not set in the configuration.
+      http_generated_images_path = if relative?
+        compute_relative_path(Compass.configuration.generated_images_path)
+      elsif Compass.configuration.http_generated_images_path
+        Compass.configuration.http_generated_images_path
+      else
+        Compass.configuration.http_root_relative(Compass.configuration.generated_images_dir)
+      end
+
+      # Compute the real path to the image on the file stystem if the generated_images_dir is set.
+      real_path = if Compass.configuration.generated_images_dir
+        File.join(Compass.configuration.project_path, Compass.configuration.generated_images_dir, path)
+      end
+
+      # prepend the path to the image if there's one
+      if http_generated_images_path
+        http_generated_images_path = "#{http_generated_images_path}/" unless http_generated_images_path[-1..-1] == "/"
+        path = "#{http_generated_images_path}#{path}"
+      end
+
+      # Compute the asset host unless in relative mode.
+      asset_host = if !relative? && Compass.configuration.asset_host
+        Compass.configuration.asset_host.call(path)
+      end
+
+      # Compute and append the cache buster if there is one.
+      if cache_buster.to_bool
+        if cache_buster.is_a?(Sass::Script::String)
+          path += "?#{cache_buster.value}"
+        else
+          path = cache_busted_path(path, real_path)
+        end
+      end
+
+      # prepend the asset host if there is one.
+      path = "#{asset_host}#{'/' unless path[0..0] == "/"}#{path}" if asset_host
+
+      clean_url(path)
+    end
+  end
 
   private
 

lib/compass/sass_extensions/sprites.rb

@@ -7,8 +7,10 @@ module Compass
     end
   end
 end
-
+require 'compass/sass_extensions/sprites/image_row'
+require 'compass/sass_extensions/sprites/row_fitter'
 require 'compass/sass_extensions/sprites/image'
+require 'compass/sass_extensions/sprites/layout_methods'
 require 'compass/sass_extensions/sprites/sprite_methods'
 require 'compass/sass_extensions/sprites/image_methods'
 require 'compass/sass_extensions/sprites/sprite_map'

lib/compass/sass_extensions/sprites/image.rb

@@ -17,7 +17,16 @@ module Compass
         
         # The Full path to the image
         def file
-          File.join(Compass.configuration.images_path, relative_file)
+          @file ||= find_file
+        end
+        
+        def find_file
+          Compass.configuration.sprite_load_path.each do |path|
+            f = File.join(path, relative_file)
+            if File.exists?(f)
+              return f
+            end
+          end
         end
         
         # Width of the image
@@ -25,6 +34,10 @@ module Compass
           dimensions.first
         end
         
+        def size
+          @size ||= File.size(file)
+        end
+        
         # Height of the image
         def height
           dimensions.last
@@ -35,29 +48,28 @@ module Compass
           File.basename(relative_file, '.png')
         end
 
-        # Value of <tt> $#{name}-repeat </tt> or <tt> $repeat </tt>
-        def repeat
-          [ "#{name}-repeat", "repeat" ].each { |which|
-            if var = options.get_var(which)
-              return var.value
-            end
-          }
-          "no-repeat"
+        def get_var_file(var)
+          options.get_var "#{base.name}_#{name}_#{var}"
         end
 
-        # Value of <tt> $#{name}-position </tt> or <tt> $position </tt> defaults o <tt>0px</tt>
+        # Value of <tt> $#{name}-repeat </tt> or <tt> $repeat </tt>
+        def repeat
+         @repeat ||= (get_var_file("repeat") || options.get_var("repeat") || Sass::Script::String.new("no-repeat")).value
+        end
+
+        # Value of <tt> $#{name}-position </tt> or <tt> $position </tt> defaults to <tt>0px</tt>
         def position
-          options.get_var("#{name}-position") || options.get_var("position") || Sass::Script::Number.new(0, ["px"])
+          @position||= get_var_file("position") || options.get_var("position") || Sass::Script::Number.new(0, ["px"])
         end
         
         # Offset within the sprite
         def offset
-          (position.unitless? || position.unit_str == "px") ? position.value : 0
+          @offset ||= (position.unitless? || position.unit_str == "px") ? position.value : 0
         end
                
         # Spacing between this image and the next
         def spacing
-          (options.get_var("#{name}-spacing") || options.get_var("spacing") || Sass::Script::Number.new(0)).value
+          @spacing ||= (get_var_file("spacing") || options.get_var("spacing") || Sass::Script::Number.new(0, ['px'])).value
         end
 
         # MD5 hash of this file

lib/compass/sass_extensions/sprites/image_row.rb

@@ -0,0 +1,47 @@
+require 'forwardable'
+
+module Compass
+  module SassExtensions
+    module Sprites
+      class ImageRow
+        extend Forwardable
+
+        attr_reader :images, :max_width
+        def_delegators :@images, :last, :delete, :empty?, :length
+        
+        def initialize(max_width)
+          @images = []
+          @max_width = max_width
+        end
+        
+        def add(image)
+          return false if !will_fit?(image)
+          @images << image
+          true
+        end
+
+        alias :<< :add
+        
+        def height
+          images.map(&:height).max
+        end
+        
+        def width
+          images.map(&:width).max
+        end
+
+        def total_width
+          images.inject(0) {|sum, img| sum + img.width }
+        end
+        
+        def efficiency
+          1 - (total_width.to_f / max_width.to_f)
+        end
+
+        def will_fit?(image)
+          (total_width + image.width) <= max_width
+        end
+      end
+    end
+  end
+end

lib/compass/sass_extensions/sprites/layout_methods.rb

@@ -0,0 +1,121 @@
+module Compass
+  module SassExtensions
+    module Sprites
+      module LayoutMethods
+        HORIZONTAL = 'horizontal'
+        DIAGONAL = 'diagonal'
+        SMART = 'smart'
+        
+        def smart?
+          layout == SMART
+        end
+        
+        def horizontal?
+          layout == HORIZONTAL
+        end
+        
+        def diagonal?
+          layout == DIAGONAL
+        end
+        
+        def layout
+          @layout ||= @kwargs.get_var('layout').value
+        end
+        
+        # Calculates the overal image dimensions
+        # collects image sizes and input parameters for each sprite
+        def compute_image_positions!
+          case layout
+          when SMART
+            calculate_smart_positions
+          when DIAGONAL
+            calculate_diagonal_dimensions
+            calculate_diagonal_positions
+          when HORIZONTAL
+            @height = height_for_horizontal_layout
+            calculate_horizontal_positions
+            @width = width_for_horizontal_layout
+          else
+            @images.sort! {|a,b| b.size <=> a.size}
+            @width = width_for_vertical_layout
+            calulate_vertical_postions
+            @height = height_for_vertical_layout
+          end
+        end
+        
+        def calculate_smart_positions
+          fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images)
+          current_y = 0
+          fitter.fit!.each do |row|
+            current_x = 0
+            row.images.each_with_index do |image, index|
+              image.left = current_x
+              image.top = current_y
+              current_x += image.width
+            end
+            current_y += row.height
+          end
+          @width = fitter.width
+          @height = fitter.height
+        end
+        
+        
+        def calculate_diagonal_dimensions
+          @width = @images.inject(0) {|sum, img| sum + img.width}
+          @height = @images.inject(0) {|sum, img| sum + img.height}
+        end
+        
+        def calculate_diagonal_positions
+          previous = nil
+          @images.each_with_index do |image, index|
+            if previous.nil?
+              previous = image
+              image.top = @height - image.height
+              image.left = 0
+              next
+            end
+            image.top = previous.top - image.height
+            image.left = previous.left + previous.width
+            previous = image
+          end
+        end
+        
+        def calculate_horizontal_positions
+          @images.each_with_index do |image, index|
+            image.top = image.position.unit_str == '%' ? (@height - image.height) * (image.position.value / 100.0) : image.position.value
+            next if index == 0
+            last_image = @images[index-1]
+            image.left = last_image.left + last_image.width + [image.spacing, last_image.spacing].max
+          end
+        end
+        
+        def calulate_vertical_postions
+          @images.each_with_index do |image, index|
+            image.left = image.position.unit_str == "%" ? (@width - image.width) * (image.position.value / 100.0) : image.position.value
+            next if index == 0
+            last_image = @images[index-1]
+            image.top = last_image.top + last_image.height + [image.spacing,  last_image.spacing].max
+          end
+        end
+        
+        def height_for_vertical_layout
+          last = @images.last
+          last.top + last.height
+        end
+        
+        def height_for_horizontal_layout
+          @height = @images.map {|image| image.height + image.offset}.max
+        end
+        
+        def width_for_horizontal_layout
+          @images.inject(0) { |sum, image| sum += (image.width + image.spacing) }
+        end
+        
+        def width_for_vertical_layout
+          @images.map { |image| image.width + image.offset }.max
+        end
+      end
+    end
+  end
+end
+  

lib/compass/sass_extensions/sprites/row_fitter.rb

@@ -0,0 +1,86 @@
+require 'forwardable'
+
+module Compass
+  module SassExtensions
+    module Sprites
+      class RowFitter
+        extend Forwardable
+
+        attr_reader :images, :rows
+        def_delegators :rows, :[]
+
+        def initialize(images)
+          @images = images.sort {|a,b| a.height <=> b.height }
+          @rows = []
+        end
+
+        def fit!(style = :scan)
+          send("#{style}_fit")
+          @rows
+        end
+
+        def width
+          @width ||= @images.collect(&:width).max
+        end
+        
+        def height
+          @height ||= @rows.inject(0) {|sum, row| sum += row.height}
+        end
+
+        def efficiency
+          @rows.inject(0) { |sum, row| sum += row.efficiency } ** @rows.length
+        end
+
+        private
+        def new_row(image = nil)
+          row = Compass::SassExtensions::Sprites::ImageRow.new(width)
+          row.add(image) if image
+          row
+        end
+
+        def fast_fit
+          row = new_row
+          @images.each do |image|
+            if !row.add(image)
+              @rows << row
+              row = new_row(image)
+            end
+          end
+
+          @rows << row
+        end
+
+        def scan_fit
+          fast_fit
+
+          moved_images = []
+
+          begin
+            removed = false
+
+            catch :done do
+              @rows.each do |row|
+                (@rows - [ row ]).each do |other_row|
+                  other_row.images.each do |image|
+                    if !moved_images.include?(image)
+                      if row.will_fit?(image)
+                        other_row.delete(image)
+                        row << image
+
+                        @rows.delete(other_row) if other_row.empty?
+                        removed = true
+
+                        moved_images << image
+                        throw :done
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end while removed
+        end
+      end
+    end
+  end
+end

lib/compass/sass_extensions/sprites/sprite_map.rb

@@ -7,16 +7,29 @@ module Compass
 
         include SpriteMethods
         include ImageMethods
+        include LayoutMethods
 
 
         # Initialize a new sprite object from a relative file path
         # the path is relative to the <tt>images_path</tt> confguration option
         def self.from_uri(uri, context, kwargs)
-          importer = ::Compass::SpriteImporter.new(:uri => uri.value, :options => {})
-          sprites = importer.files.map do |sprite|
-            sprite.gsub(Compass.configuration.images_path+"/", "")
+          uri = uri.value
+          path, name = Compass::SpriteImporter.path_and_name(uri)
+          files = Compass::SpriteImporter.files(uri)
+          sprites = files.map do |sprite|
+            relative_name(sprite)
+          end
+          new(sprites, path, name, context, kwargs)
+        end
+        
+        def self.relative_name(sprite)
+          sprite = File.expand_path(sprite)
+          Compass.configuration.sprite_load_path.each do |path|
+            path = File.expand_path(path)
+            if sprite.include?(path)
+              return sprite.gsub("#{path}/", "")
+            end
           end
-          new(sprites, importer.path, importer.name, context, kwargs)
         end
 
         def initialize(sprites, path, name, context, kwargs)
@@ -25,6 +38,7 @@ module Compass
           @name = name
           @kwargs = kwargs
           @kwargs['cleanup'] ||= Sass::Script::Bool.new(true)
+          @kwargs['layout'] ||= Sass::Script::String.new('vertical')
           @images = nil
           @width = nil
           @height = nil

lib/compass/sass_extensions/sprites/sprite_methods.rb

@@ -14,7 +14,6 @@ module Compass
           @width = 0
           init_images
           compute_image_positions!
-          @height = @images.last.top + @images.last.height
           init_engine
         end
         
@@ -29,22 +28,10 @@ module Compass
         def init_images
           @images = image_names.collect do |relative_file|
             image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs)
-            @width = [ @width, image.width + image.offset ].max
             image
           end
         end
         
-        # Calculates the overal image dimensions
-        # collects image sizes and input parameters for each sprite
-        def compute_image_positions!
-          @images.each_with_index do |image, index|
-            image.left = image.position.unit_str == "%" ? (@width - image.width) * (image.position.value / 100) : image.position.value
-            next if index == 0
-            last_image = @images[index-1]
-            image.top = last_image.top + last_image.height + [image.spacing,  last_image.spacing].max
-          end
-        end
-        
         # Validates that the sprite_names are valid sass
         def validate!
           for sprite_name in sprite_names
@@ -56,7 +43,7 @@ module Compass
 
         # The on-the-disk filename of the sprite
         def filename
-          File.join(Compass.configuration.images_path, "#{path}-s#{uniqueness_hash}.png")
+          File.join(Compass.configuration.generated_images_path, "#{path}-s#{uniqueness_hash}.png")
         end
 
         # Generate a sprite image if necessary
@@ -66,7 +53,7 @@ module Compass
               cleanup_old_sprites
             end
             engine.construct_sprite
-            Compass.configuration.run_callback(:sprite_generated, engine.canvas)
+            Compass.configuration.run_sprite_generated(engine.canvas)
             save!
           end
         end
@@ -100,8 +87,9 @@ module Compass
 
         # Saves the sprite engine
         def save!
+          FileUtils.mkdir_p(File.dirname(filename))
           saved = engine.save(filename)
-          Compass.configuration.run_callback(:sprite_saved, filename)
+          Compass.configuration.run_sprite_saved(filename)
           saved
         end
 

lib/compass/sprite_importer.rb

@@ -1,6 +1,5 @@
 module Compass
   class SpriteImporter < Sass::Importers::Base
-    attr_accessor :uri, :options
     VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
     SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
     VALID_EXTENSIONS = ['.png']
@@ -8,33 +7,19 @@ module Compass
     # finds all sprite files
     def self.find_all_sprite_map_files(path)
       hex = "[0-9a-f]"
-      glob = "*-{,s}#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
+      glob = "*-s#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
       Dir.glob(File.join(path, "**", glob))
     end
     
-    def self.load(uri, options)
-      klass = Compass::SpriteImporter.new
-      klass.uri, klass.options = uri, options
-      klass
-    end
-    
-    def initialize(options ={})
-      @uri, @options = '', {}
-      options.each do |key, value|
-        send("#{key}=", value)
-      end
-    end
-    
     def find(uri, options)
-      @uri, @options = uri, options
       if uri =~ SPRITE_IMPORTER_REGEX
-        return sass_engine
+        return self.class.sass_engine(uri, self.class.sprite_name(uri), self, options)
       end
+      nil
     end
     
     def find_relative(uri, base, options)
-      @uri, @options = uri, options
-      find(File.join(base, uri), options)
+      nil
     end
     
     def to_s
@@ -50,45 +35,47 @@ module Compass
     end
     
     def mtime(uri, options)
-      @uri, @options = uri, options
-      files.sort.inject(Time.at(0)) do |max_time, file|
+      self.class.files(uri).sort.inject(Time.at(0)) do |max_time, file|
         (t = File.mtime(file)) > max_time ? t : max_time
       end
     end
     
     def key(uri, options={})
-      @uri, @options = uri, options
-      [self.class.name + ":" + File.dirname(File.expand_path(uri)), File.basename(uri)]
+      [self.class.name + ":sprite:" + File.dirname(File.expand_path(uri)), File.basename(uri)]
     end
     
     def self.path_and_name(uri)
       if uri =~ SPRITE_IMPORTER_REGEX
         [$1, $3]
       else
-        raise Compass::Error "invalid sprite path"
+        raise Compass::Error, "invalid sprite path"
       end
     end
 
     # Name of this spite
-    def name
-      ensure_path_and_name!
-      @name
+    def self.sprite_name(uri)
+      _, name = path_and_name(uri)
+      name
     end
 
     # The on-disk location of this sprite
-    def path
-      ensure_path_and_name!
-      @path
+    def self.path(uri)
+      path, _ = path_and_name(uri)
+      path
     end
     
-    # Returns the Glob of image files for this sprite
-    def files
-      Dir[File.join(Compass.configuration.images_path, uri)].sort
+    # Returns the Glob of image files for the uri
+    def self.files(uri)
+      Compass.configuration.sprite_load_path.each do |folder|
+        files = Dir[File.join(folder, uri)].sort
+        next if files.empty?
+        return files
+      end
     end
 
     # Returns an Array of image names without the file extension
-    def sprite_names
-      files.collect do |file|
+    def self.sprite_names(uri)
+      files(uri).collect do |file|
         filename = File.basename(file, '.png')
         unless VAILD_FILE_NAME =~ filename
           raise Compass::Error, "Sprite file names must be legal css identifiers. Please rename #{File.basename(file)}"
@@ -97,31 +84,18 @@ module Compass
       end
     end
     
-    def validate_sprites!
-      files.each do |file|
-        unless VALID_EXTENSIONS.include? File.extname(file)
-          raise Compass::Error, "Invalid sprite extension only: #{VALID_EXTENSIONS.join(',')} images are allowed"
-        end
-      end
-    end
-    
-    # Returns the sass options for this sprite
-    def sass_options
-      options.merge(:filename => name, :syntax => :scss, :importer => self)
+    # Returns the sass_options for this sprite
+    def self.sass_options(uri, importer, options)
+      options.merge!(:filename => uri, :syntax => :scss, :importer => importer)
     end
     
     # Returns a Sass::Engine for this sprite object
-    def sass_engine
-      validate_sprites!
-      Sass::Engine.new(content_for_images, sass_options)
-    end
-    
-    def ensure_path_and_name!
-      @path, @name = self.class.path_and_name(uri)
+    def self.sass_engine(uri, name, importer, options)
+      Sass::Engine.new(content_for_images(uri, name, options[:skip_overrides]), sass_options(uri, importer, options))
     end
 
     # Generates the Sass for this sprite file
-    def content_for_images(skip_overrides = false)
+    def self.content_for_images(uri, name, skip_overrides = false)
       <<-SCSS
 @import "compass/utilities/sprites/base";
 
@@ -134,8 +108,9 @@ $#{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}\", $cleanup: $#{name}-clean-up);" : generate_overrides }
+#{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.
@@ -161,13 +136,13 @@ $#{name}-clean-up: true !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.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
@@ -176,12 +151,13 @@ SCSS
     # <tt>$#{name}-#{sprite_name}-position </tt>
     # <tt> $#{name}-#{sprite_name}-spacing </tt>
     # <tt> #{name}-#{sprite_name}-repeat: </tt>
-    def generate_overrides
+    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
-      sprite_names.map do |sprite_name| 
+      sprites.map do |sprite_name| 
         content += <<-SCSS
 $#{name}-#{sprite_name}-position: $#{name}-position !default;
 $#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
@@ -189,11 +165,11 @@ $#{name}-#{sprite_name}-repeat: $#{name}-repeat !default;
         SCSS
       end.join
 
-      content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n$cleanup: $#{name}-clean-up,\n"
-      content += sprite_names.map do |sprite_name| 
-%Q{  $#{sprite_name}-position: $#{name}-#{sprite_name}-position,
-  $#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
-  $#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
+      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 += ");"
     end

test/fixtures/stylesheets/compass/css/lists.css

@@ -7,7 +7,7 @@ ul.horizontal {
   ul.horizontal li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     white-space: nowrap;
     display: inline;
     float: left;
@@ -29,7 +29,7 @@ ul.wide-horizontal {
   ul.wide-horizontal li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     white-space: nowrap;
     display: inline;
     float: left;
@@ -51,7 +51,7 @@ ul.right-horizontal {
   ul.right-horizontal li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     white-space: nowrap;
     display: inline;
     float: right;
@@ -73,7 +73,7 @@ ul.no-padding {
   ul.no-padding li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     white-space: nowrap;
     display: inline;
     float: left; }
@@ -87,7 +87,7 @@ ul.inline-block {
   ul.inline-block li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     display: -moz-inline-box;
     -moz-box-orient: vertical;
     display: inline-block;
@@ -106,7 +106,7 @@ ul.wide-inline-block {
   ul.wide-inline-block li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px;
+    margin-left: 0;
     display: -moz-inline-box;
     -moz-box-orient: vertical;
     display: inline-block;
@@ -143,7 +143,7 @@ ul.no-bullets {
   ul.no-bullets li {
     list-style-image: none;
     list-style-type: none;
-    margin-left: 0px; }
+    margin-left: 0; }
 
 ul.pretty {
   margin-left: 0; }

test/fixtures/stylesheets/compass/css/reset.css

@@ -50,7 +50,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 
 body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered audio.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered canvas.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered command.registered-only, body.registered datalist.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered embed.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered keygen.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered mark.registered-only, body.registered meter.registered-only, body.registered output.registered-only, body.registered progress.registered-only, body.registered q.registered-only, body.registered rp.registered-only, body.registered rt.registered-only, body.registered ruby.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered time.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only, body.registered video.registered-only, body.registered wbr.registered-only {
   display: inline; }
-
 body.registered address.registered-only, body.registered article.registered-only, body.registered aside.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered details.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered figcaption.registered-only, body.registered figure.registered-only, body.registered form.registered-only, body.registered footer.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered header.registered-only, body.registered hgroup.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered nav.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered section.registered-only, body.registered summary.registered-only, body.registered ul.registered-only {
   display: block; }
 

test/integrations/compass_test.rb

@@ -125,11 +125,10 @@ private
       expected_lines.gsub!(/^@charset[^;]+;/,'') if options[:ignore_charset]
       expected_lines = expected_lines.split("\n").reject{|l| l=~/\A\Z/}
       expected_lines.zip(actual_lines).each_with_index do |pair, line|
-        message = "template: #{name}\nline:     #{line + 1}"
         if pair.first == pair.last
           assert(true)
         else
-          assert false, diff_as_string(pair.first.inspect, pair.last.inspect)
+          assert false, "Error in #{result_path(@current_project)}/#{name}.css:#{line + 1}\n"+diff_as_string(pair.first.inspect, pair.last.inspect)
         end
       end
       if expected_lines.size < actual_lines.size