@@ -356,9 +363,9 @@ that points to the asset on disk — which may or may not exist.
# Increment the deploy_version before every release to force cache busting.
deploy_version = 1
- asset_cache_buster do |http_path, real_path|
- if File.exists?(real_path)
- File.mtime(real_path).strftime("%s")
+ asset_cache_buster do |http_path, file|
+ if file
+ file.mtime.strftime("%s")
else
"v=#{deploy_version}"
end
@@ -366,10 +373,10 @@ that points to the asset on disk — which may or may not exist.
Busting the cache via path:
- asset_cache_buster do |path, real_path|
- if File.exists?(real_path)
+ asset_cache_buster do |path, file|
+ if file
pathname = Pathname.new(path)
- modified_time = File.mtime(real_path).strftime("%s")
+ modified_time = file.mtime.strftime("%s")
new_path = "%s/%s-%s%s" % [pathname.dirname, pathname.basename(pathname.extname), modified_time, pathname.extname]
{:path => new_path, :query => nil}
@@ -425,4 +432,4 @@ to avoid crashing the watcher in the case where the file has been removed.
self.icon = '/path/to/fail.jpg'
sticky!
}
- end
\ No newline at end of file
+ end
diff --git a/compass-style.org/content/help/documentation/sass-based-configuration-options.markdown b/compass-style.org/content/help/documentation/sass-based-configuration-options.markdown
new file mode 100644
index 0000000000..e56bf67212
--- /dev/null
+++ b/compass-style.org/content/help/documentation/sass-based-configuration-options.markdown
@@ -0,0 +1,117 @@
+---
+title: Sass-based Configuration Options
+layout: documentation
+classnames:
+ - documentation
+---
+# Sass-based Configuration Options
+
+Most of the options available in the Ruby-based configuration file are
+used to configure the Sass compiler. These options cannot be configured
+from within your Sass files.
+
+However some Compass options are possible to set from within Sass
+because they are only used to control how Compass's built-in functions
+work. For example, url generation using `image-url()` and `font-url()`.
+
+The options that can be set via Sass configuration are:
+
+* `asset-cache-buster` - String, Function reference, or `null`. The function
+ reference must accept two arguments (url path, filename) and can
+ return either a string to be interpreted as a query parameter or a map
+ containing the keys query and/or path mapped to a string. The string
+ is a simple value to set as the query parameter on all urls, when
+ `null`, the cache busting feature is disabled.
+* `asset-host` - Function reference, or `null`. When `null` this feature
+ is disabled (default). A referenced function must accept a single
+ argument (the root relative url) and return a full url (starting with
+ "http").
+* `disable-warnings` - Boolean. When true, warnings will not be output.
+* `fonts-dir` - String. Relative to project directory.
+* `fonts-path` - String. Absolute path.
+* `generated-images-dir` - String. Relative to project directory.
+* `generated-images-path` - String. Absolute path.
+* `http-fonts-dir` - String. Relative to project directory.
+* `http-fonts-path` - String. Absolute path.
+* `http-generated-images-dir` - String. Relative to http path.
+* `http-generated-images-path` - String. Absolute path.
+* `http-images-dir` - String. Relative to project directory.
+* `http-images-path` - String. Absolute path.
+* `http-path` - String. URL Prefix of all urls starting with '/'.
+* `images-dir` - String. Relative to project directory.
+* `images-path` - String. Absolute path.
+* `relative-assets` - Boolean. When true, generate relative paths from
+ the css file to the asset.
+
+The have the same meaning as the corresponding options in the ruby
+configuration format. However, there are some things that are different
+that are worth explaining.
+
+## Working with paths.
+
+Compass provides a function called `absolute-path` that will turn any
+path relative to the sass file it is called from into an absolute path.
+In order to make your stylesheets work on both windows and unix-based
+operating systems, you should use the `join-file-segments` function
+instead of a file separator.
+
+For example. If your configuration partial was stored in a subdirectory
+of your sass folder you would want to set `$project-path` to
+`absolute-path(join-file-segments('..', '..'))`.
+
+In some cases it is useful to parse a url or filename.
+The function `split-filename($filename)` returns a triple of
+`(directory, basename, extension)`.
+
+## Working with Function References
+
+Some configuration options passed to compass accept a function
+reference. This is an identifier that is the same name as a Sass
+function defined in either Sass or Ruby. What arguments the function
+accepts and should return depends on the particular configuration
+property. For example:
+
+ @function my-cache-buster($url, $file) {
+ $hash: md5sum($file);
+ @if $hash {
+ @return (query: "h=#{$hash}");
+ } @else {
+ @return null;
+ }
+ }
+
+ @include compass-configuration($asset-cache-buster: my-cache-buster);
+
+
+## Configuration File Best Practices
+
+It is suggested that all compass configuration performed from within
+Sass should be kept in a single partial named `project-setup`. This file
+should be imported into every Sass file that is to be used with Compass.
+
+
+## Understanding the project setup file
+
+ $project-path: absolute-path("..");
+
+The global `$project-path` must be set to an absolute path to the
+directory of the project. This global is used to initial compass
+when importing `compass/configuration`.
+
+ $debug-configuration: true;
+
+Causes compass to output useful debugging information about how it is
+configured.
+
+ @import "compass/configuration";
+
+Initializes compass and makes some useful configuration utilities available.
+
+ $compass-options: (http_path: "/");
+ @include compass-configuration($compass-options);
+
+Configures Compass according to your specific needs. If this mixin is
+called more than once it will give you a warning. To reconfigure compass
+with different options, pass `$reconfigure: true` to the
+compass-configuration mixin.
+
diff --git a/compass-style.org/content/help/documentation/tuning-vendor-prefixes.markdown b/compass-style.org/content/help/documentation/tuning-vendor-prefixes.markdown
new file mode 100644
index 0000000000..131e54d8c0
--- /dev/null
+++ b/compass-style.org/content/help/documentation/tuning-vendor-prefixes.markdown
@@ -0,0 +1,202 @@
+---
+title: Tuning Vendor Prefix Support
+layout: documentation
+classnames:
+ - documentation
+---
+
+# Tuning Vendor Prefixes from Compass Stylesheets
+
+Underneath the covers of Compass's vendor prefixing and legacy
+browser support is the very same data that drives the website
+[caniuse.com](http://caniuse.com).
+
+This data allows Compass to correlate browser support with browser usage
+statistics and browser versions for you. By telling Compass the user
+thresholds where you're comfortable letting a user's experience degrade
+gracefully or break Compass will automatically add or remove vendor
+prefixes for particular features according to the browser statistics
+corresponding to them.
+
+## Allowing Graceful Degradation in Legacy Browsers
+
+CSS features that can degrade gracefully (E.g. `border-radius`) are set
+by default to adhere to the `$graceful-usage-threshold` variable. This
+variable defaults to `0.1` which means that when 0.1% of users (1 in
+1,000) would be affected by removing the prefix for that feature, it
+will be removed.
+
+## Allowing Broken Design in Legacy Browsers
+
+CSS features that do not degrade gracefully (E.g. `flexbox`) are set by
+default to adhere to the `$critical-usage-threshold` variable. This
+variable defaults to `0.01` which means that when 0.01% of users (1 in
+10,000) would be affected by removing the prefix for that feature, it
+will be removed.
+
+## Ensuring a Browser Version Is Supported
+
+Sometimes you may wish to fully support a browser version no matter how
+few people are using it. Maybe the CEO uses it and it has to look
+perfect. In this case you can set the minimum browser version for each
+known browser with the `$browser-minimum-versions` map. For instance, if
+you need to support IE 6, you would set `$browser-minimum-versions` to
+`(ie: '6')`. Please note that since not all browser versions that
+Compass tracks are numbers, every version specified must be a string.
+
+## Excluding a Browser no Matter How Many Users it Has
+
+The `$supported-browsers` variable defines which browsers your site
+supports. By default, all browsers are supported. You can use this
+setting to whitelist only certain browsers, or you can blacklist
+specific browsers by rejecting them from the full list. Example:
+`$supported-browsers: reject(browsers(), opera-mini, android)`
+
+## Discovering Browsers and Versions
+
+The list of browsers and versions that are known to compass is guided by
+the underlying data. You can inspect these values in the console:
+
+ $ compass interactive
+ >> browsers()
+ ("android", "android-chrome", "android-firefox", "blackberry", "chrome", "firefox", "ie", "ie-mobile", "ios-safari", "opera", "opera-mini", "opera-mobile", "safari")
+ >> browser-versions(ie)
+ ("5.5", "6", "7", "8", "9", "10", "11")
+
+## Tweaking Support on a Per-Feature Basis
+
+Each CSS3 module provides feature-specific threshold variables. These
+default to either `$graceful-usage-threshold` or
+`$critical-usage-threshold`, which should be good enough, but if it's
+not, you can adjust the support for just the features that matter to
+you. For example, the border radius module has a configuration variable
+`$border-radius-threshold` which defaults to
+`$graceful-usage-threshold`. But if rounded corners are essential to
+your design, you may want to set it to something lower.
+
+## Prefix Context
+
+There are two variables relating to prefix context.
+
+`$prefix-context` will be set to a prefix whenever a prefix is in scope.
+
+`$current-prefix` is set the prefix that is currently being emitted. This
+is different from `$prefix-context` in that sometimes it is null when
+rendering official syntax within the scope of some other prefix.
+
+All Compass mixins are aware of the prefix context and you can use them
+freely and get the output you expect. You can also check the context
+yourself if you feel it is necessary. For example, the keyframes mixin
+accepts a content block which is repeated several times:
+
+ @import "compass/css3";
+ @include keyframes(my-animation) {
+ 0% {
+ @if $prefix-context == -moz {
+ // Do something mozilla specific in your animation.
+ }
+ @include border-radius(5px); // only outputs the -moz prefix an
+ }
+ }
+
+However, Compass comes with a handy mixin for targeting content to a
+specific prefix context: `with-browser-prefix`. This mixin can be used
+to establish a context or prevent content from being placed into a
+context where it doesn't belong. For example, we could have written the
+example above as:
+
+ @import "compass/css3";
+ @include keyframes(my-animation) {
+ 0% {
+ @include with-prefix(-moz) {
+ // Do something mozilla specific in your animation.
+ }
+ @include border-radius(5px); // only outputs the -moz prefix an
+ }
+ }
+
+Similarly, you can constrain compass output to a particular prefix. The
+example below would only generate the mozilla and official keyframes
+directives and prefixed properties.
+
+ @import "compass/css3";
+ @include with-prefix(-moz) {
+ @include keyframes(my-animation) {
+ 0% {
+ @include border-radius(5px); // only outputs the -moz prefix an
+ }
+ }
+ }
+
+## Targeting Legacy Browsers
+
+When a generic mixin has support for a legacy browser, the legacy
+specific styles should be wrapped in a `for-legacy-browser` mixin.
+In this way, the legacy content will only appear when not in an
+incompatible context and will be automaticaly removed when the usage
+of that browser range falls below acceptable thresholds.
+
+## Browser Context
+
+If you are in a selector or scope that you know is specific to a
+particular browser version, you can let compass know this with the
+`with-browser-ranges` mixins.
+
+## Debugging Browser Support
+
+If you find yourself in a situation where you see a browser prefix you
+didn't expect or don't see one that you did, it may be helpful to turn
+on browser support debugging by setting `$debug-browser-support` to `true`.
+
+This will cause CSS comments to be generated into your output that explains
+why support for certain browsers was included or excluded.
+
+You can also use the `with-browser-support-debugging` mixin that will
+enable browser support debugging for all compass mixins uses within its
+content block.
+
+The output will look like this:
+
+ /* Capability css-animation is prefixed with -moz because 1.03559% of users need it which is more than the threshold of 0.1%. */
+ /* Creating new -moz context. */
+ @-moz-keyframes foo {
+ 0% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: ie 8 is incompatible with -moz. */
+ opacity: 0; }
+
+ 100% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: ie 8 is incompatible with -moz. */
+ opacity: 1; } }
+ /* Capability css-animation is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */
+ /* Capability css-animation is not prefixed with -o because 0.04931% of users are affected which is less than the threshold of 0.1. */
+ /* Capability css-animation is prefixed with -webkit because 51.42143% of users need it which is more than the threshold of 0.1%. */
+ /* Creating new -webkit context. */
+ @-webkit-keyframes foo {
+ 0% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: ie 8 is incompatible with -webkit. */
+ opacity: 0; }
+
+ 100% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: ie 8 is incompatible with -webkit. */
+ opacity: 1; } }
+ @keyframes foo {
+ 0% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: The current scope only works with ie 10 - 11. */
+ opacity: 0; }
+
+ 100% {
+ /* Content for ie 8 omitted.
+ Not allowed in the current scope: The current scope only works with ie 10 - 11. */
+ opacity: 1; } }
+
+
+
+## More Information
+
+There are many useful mixins and functions in
+[the code reference for browser support in compass](/reference/compass/support/).
diff --git a/compass-style.org/content/help/index.haml b/compass-style.org/content/help/index.haml
new file mode 100644
index 0000000000..cafcc872c3
--- /dev/null
+++ b/compass-style.org/content/help/index.haml
@@ -0,0 +1,70 @@
+---
+title: Compass Help
+crumb: Help
+classnames:
+ - help
+ - getting-started
+layout: site
+---
+%article
+ %h1 Getting started with Compass
+
+ :markdown
+ Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
+ language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
+ not familiar with Sass, Go to [sass-lang.com](http://sass-lang.com/guide) to learn
+ all about how it works.
+
+ :markdown
+ ## Installing Compass
+
+ To install, please follow the steps found in the [Compass installation guide](/install/).
+
+ This will install Compass and Sass too. If you want to verify that compass is installed, run:
+
+ $ compass version
+
+ ## Watching and Compiling your Project
+
+ When doing development on your project, you can run the compass watcher to keep your CSS files
+ up to date as changes are made.
+
+ $ cd /path/to/project
+ $ compass watch
+
+ When it comes time to compile your css files for production use, pass the `-e production`
+ compiler option to select defaults that optimize your output for end-users:
+
+ $ compass compile -e production
+
+ ## Using Compass without the command line tools
+
+ You can use compass without the compass command line tools. In some cases,
+ this may make it easier to integrate with sass-based compilers and frameworks that
+ do not explicitly support Compass.
+
+ $ gem install compass-core
+ $ cat <<- EOF > _project-setup.scss
+ \$project-path: absolute-path(join-file-segments(".."));
+ @import "compass/configuration";
+ \$compass-options: (http_path: "/");
+ @include compass-configuration(\$compass-options);
+ EOF
+ # Add to the top of each sass file: @import "project-setup";
+ # Compile using the Sass command line:
+ $ sass -r compass-core --update sass:css
+
+ Read more: [Compass's Sass-based configuration options](/help/documentation/sass-based-configuration-options/).
+
+ ## More command line options
+
+ Full documentation of all compass commands can be found by running:
+
+ $ compass help
+
+ To see the options available and description for a compass command run:
+
+ $ compass help
+
+ Where `` is one of the compass commands (E.g. `compile`)
+
diff --git a/doc-src/content/help/tutorials.haml b/compass-style.org/content/help/tutorials.haml
similarity index 79%
rename from doc-src/content/help/tutorials.haml
rename to compass-style.org/content/help/tutorials.haml
index 047f8f520d..5fe64183b5 100644
--- a/doc-src/content/help/tutorials.haml
+++ b/compass-style.org/content/help/tutorials.haml
@@ -13,8 +13,8 @@ layout: tutorial
## New to Compass?
- If you're new to Compass, you might be interested in [best practices](/help/tutorials/best_practices/), the [configuration reference](/help/tutorials/configuration-reference/), [configurable variables](/help/tutorials/configurable-variables/),
- or the [command line documentation](/help/tutorials/command-line/).
+ If you're new to Compass, you might be interested in [best practices](/help/tutorials/best_practices/), the [configuration reference](/help/documentation/configuration-reference/), [configurable variables](/help/tutorials/configurable-variables/),
+ or the [command line documentation](/help/documentation/command-line/).
## Want to contribute?
diff --git a/doc-src/content/help/tutorials/best_practices.markdown b/compass-style.org/content/help/tutorials/best_practices.markdown
similarity index 100%
rename from doc-src/content/help/tutorials/best_practices.markdown
rename to compass-style.org/content/help/tutorials/best_practices.markdown
diff --git a/doc-src/content/help/tutorials/configurable-variables.haml b/compass-style.org/content/help/tutorials/configurable-variables.haml
similarity index 100%
rename from doc-src/content/help/tutorials/configurable-variables.haml
rename to compass-style.org/content/help/tutorials/configurable-variables.haml
diff --git a/doc-src/content/help/tutorials/contributing.markdown b/compass-style.org/content/help/tutorials/contributing.markdown
similarity index 87%
rename from doc-src/content/help/tutorials/contributing.markdown
rename to compass-style.org/content/help/tutorials/contributing.markdown
index 2b0933a739..28c929c115 100644
--- a/doc-src/content/help/tutorials/contributing.markdown
+++ b/compass-style.org/content/help/tutorials/contributing.markdown
@@ -61,7 +61,7 @@ Now you need to get your change [accepted](#patches).
Making Documentation Changes
-The compass documentation is stored in two places. First, the `doc-src` directory is
+The compass documentation is stored in two places. First, the `compass-style.org` directory is
where the documentation lives -- however much of the documentation is generated
from comments in the Sass files themselves. More information on [changing
documentation][documentation]. Once your changes are pushed, please
@@ -165,32 +165,37 @@ will result:
Project Structure
compass/
- bin/
- compass - CLI executable
- devbin/ - development scripts after installing the bundle
- doc-src/ - source for documentation
- docs/ - generated documentation
- examples/ - fully working compass projects that you can explore
- features/ - tests for compass
- frameworks/ - All frameworks in this directory are loaded automatically
- compass/ - The compass framework
- stylesheets/ - The compass libraries
- templates/ - The compass project templates and patterns
- blueprint/
- stylesheets/ - The blueprint libraries
- templates/ - The blueprint project templates and patterns
- lib/
- compass.rb - The main compass ruby library
- compass/
- app_integration/ - integration with app frameworks
- commands/ - UI agnostic support for the CLI
- configuration/ - support for project configuration
- exec/ - UI code for the CLI
- installers/ - support for installing templates
- sass_extensions/ - enhancements to Sass
- functions/ - Sass functions exposed by compass
- monkey_patches/ - Changes to sass itself
- test/ - unit tests
+ core/ - The core of compass's configuration and stylesheets.
+ frameworks/ - All frameworks in this directory are loaded automatically
+ compass/ - The compass framework
+ stylesheets/ - The compass libraries
+ templates/ - The compass project templates and patterns
+ test/ - unit tests
+ lib/
+ compass-core.rb - The main compass-core ruby library
+ compass/
+ core/
+ sass_extensions/ - enhancements to Sass
+ functions/ - Sass functions exposed by compass
+ monkey_patches/ - Changes to sass itself
+ configuration/ - support for project configuration
+ cli/ - All the compass code that makes the command line work
+ bin/
+ compass - CLI executable
+ devbin/ - development scripts after installing the bundle
+ test/ - unit tests
+ features/ - tests for compass
+ lib/
+ compass.rb - The main compass ruby library
+ compass/
+ app_integration/ - integration with app frameworks
+ commands/ - UI agnostic support for the CLI
+ configuration/ - Some CLI specific configuration.
+ exec/ - UI code for the CLI
+ installers/ - support for installing templates
+ compass-style.org/ - source for documentation
+ output/ - generated documentation
+ import-once/ - Compass's import-once importer for Sass.
General Philosophy
@@ -254,15 +259,9 @@ Getting recent changes from the main repo:
command line that uses the local changes you have made. You can add `/path/to/compass/bin`
to your `$PATH`, or refer to it directly.
2. Build and install a gem:
- 1. Edit VERSION.yml and add a build indicator like so (**Do not commit this change**):
-
- ---
- :major: 0
- :minor: 10
- :patch: 6
- :build: something-uniq-to-me.1
+ 1. Edit VERSION and change the version to something like: `1.0.0.something-unique-to-me.0`
2. `gem build compass.gemspec`
- 3. `gem install compass-0.10.6.something-uniq-to-me.1.gem` -- If installing to your
+ 3. `gem install compass-0.10.6.something-uniq-to-me.0.gem` -- If installing to your
system gems, you'll probably need to add `sudo` to the front. If you don't know
what that means, you probably need to add `sudo` to the front.
3. In a [bundled][bundler] environment, you can configure your gem to use compass
@@ -344,6 +343,6 @@ a couple of ways you can react:
[pulls]: http://help.github.com/pull-requests/
[issues]: http://github.com/chriseppstein/compass/issues
-[documentation]: http://github.com/chriseppstein/compass/blob/stable/doc-src/README.markdown
+[documentation]: http://github.com/chriseppstein/compass/blob/stable/compass-style.org/README.markdown
[bundler]: http://gembundler.com/
[extensions]: /help/tutorials/extensions/
diff --git a/doc-src/content/help/tutorials/extending.markdown b/compass-style.org/content/help/tutorials/extending.markdown
similarity index 100%
rename from doc-src/content/help/tutorials/extending.markdown
rename to compass-style.org/content/help/tutorials/extending.markdown
diff --git a/doc-src/content/help/tutorials/extensions.markdown b/compass-style.org/content/help/tutorials/extensions.markdown
similarity index 97%
rename from doc-src/content/help/tutorials/extensions.markdown
rename to compass-style.org/content/help/tutorials/extensions.markdown
index 11d24a66f8..6c810158a4 100644
--- a/doc-src/content/help/tutorials/extensions.markdown
+++ b/compass-style.org/content/help/tutorials/extensions.markdown
@@ -53,6 +53,7 @@ Basic Extension Layout
|- lib (optional ruby code)
|
|- my_extension.rb (this code can register your framework if you deviate from conventions and require sass extensions, etc.)
+ |- compass-my_extension.rb (This file is automatically required by compass if it is present. Avoiding the need to pass -r to the compass command line tool.)
|
|- my_extension
|
@@ -261,6 +262,11 @@ The big advantages of using rubygems to distribute your extension is that
it allows your extension to be a dependency for other projects and that each
install is versioned, which makes supporting your extension easier.
+If distributing as a rubygem, it is a good idea to have a file
+`compass-.rb` in your lib directory that registers the
+compass framework. This will allow compass to automatically require the
+framework from within rubygems.
+
Tips for Developing Extensions
------------------------------
diff --git a/doc-src/content/help/tutorials/integration.markdown b/compass-style.org/content/help/tutorials/integration.markdown
similarity index 94%
rename from doc-src/content/help/tutorials/integration.markdown
rename to compass-style.org/content/help/tutorials/integration.markdown
index 209112fd32..dad69b3067 100644
--- a/doc-src/content/help/tutorials/integration.markdown
+++ b/compass-style.org/content/help/tutorials/integration.markdown
@@ -30,7 +30,7 @@ Also checkout this [gist](https://gist.github.com/1184843)
configure do
set :haml, {:format => :html5}
set :scss, {:style => :compact, :debug_info => false}
- Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.rb'))
+ Compass.add_project_configuration(File.join(settings.root, 'config', 'compass.rb'))
end
get '/stylesheets/:name.css' do
@@ -93,4 +93,4 @@ To filter the stylesheets using Sass and Compass, call the sass filter with Sass
### nanoc projects using the formal approach
-* [This Site](https://github.com/chriseppstein/compass/tree/master/doc-src)
+* [This Site](https://github.com/chriseppstein/compass/tree/stable/compass-style.org)
diff --git a/doc-src/content/help/tutorials/production-css.markdown b/compass-style.org/content/help/tutorials/production-css.markdown
similarity index 100%
rename from doc-src/content/help/tutorials/production-css.markdown
rename to compass-style.org/content/help/tutorials/production-css.markdown
diff --git a/doc-src/content/help/tutorials/spriting.markdown b/compass-style.org/content/help/tutorials/spriting.markdown
similarity index 82%
rename from doc-src/content/help/tutorials/spriting.markdown
rename to compass-style.org/content/help/tutorials/spriting.markdown
index 1a065e5032..7b72c35497 100644
--- a/doc-src/content/help/tutorials/spriting.markdown
+++ b/compass-style.org/content/help/tutorials/spriting.markdown
@@ -8,9 +8,10 @@ classnames:
# 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.
+Spriting has never been easier than it is 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.
****Note**: Only PNG images are supported at this time using
[`chunky_png`](https://github.com/wvanbergen/chunky_png)[*](#Oily-PNG).
@@ -31,10 +32,11 @@ 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.
+****Note**: The use of `my-icons` is only for this example, "my-icons" 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 "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;
@@ -57,14 +59,16 @@ Let's go over what happened there. The import statement told compass to [generat
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
by setting configuration variables before you import it. See the page on
-[Customization Options](/help/tutorials/spriting/customization-options/). 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
+[Customization Options](/help/tutorials/spriting/customization-options/). The goal of
+this stylesheet is to provide a simple naming convention for your
+sprites so that they are easy to remember and use. You should never have
+to care what is the name of the generated
sprite map, nor where a sprite is located within it.
## Nested Folders
-****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
+****Note**: The use of `orange` is only for this example, "orange" represents the folder name that contains your sprites.
Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
@@ -76,7 +80,7 @@ Example:
## Selector Control
-****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+****Note**: The use of `my-icons` is only for this example, "my-icons" represents the folder name that contains your sprites.
If you want control over what selectors are generated, it is easy to do. In this example,
this is done by using the magic `my-icons-sprite` mixin. Note that the mixin's name is dependent
@@ -107,7 +111,7 @@ And your stylesheet will compile to:
## Sass Functions
-****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+****Note**: The use of `my-icons` is only for this example, "my-icons" represents the folder name that contains your sprites.
Getting the image dimensions of a sprite
@@ -117,10 +121,10 @@ If you are looking to just return the dimensions see the [docs](/reference/compa
Example:
- @import "icon/*.png";
+ @import "my-icons/*.png";
$box-padding: 5px;
- $height: icon-sprite-height(some_icon);
- $width: icon-sprite-width(some_icon);
+ $height: my-icons-sprite-height(some_icon);
+ $width: my-icons-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
@@ -131,7 +135,7 @@ Example:
## Magic Imports
-****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
+****Note**: The use of `my-icons` is only for this example, "my-icons" represents the folder name that contains your sprites.
As noted above, compass will magically create sprite stylesheets for you. Some people like
magic, some people are scared by it, and others are curious about how the magic works. If
diff --git a/doc-src/content/help/tutorials/spriting/customization-options.markdown b/compass-style.org/content/help/tutorials/spriting/customization-options.markdown
similarity index 92%
rename from doc-src/content/help/tutorials/spriting/customization-options.markdown
rename to compass-style.org/content/help/tutorials/spriting/customization-options.markdown
index 7cc970d720..5da40175c9 100644
--- a/doc-src/content/help/tutorials/spriting/customization-options.markdown
+++ b/compass-style.org/content/help/tutorials/spriting/customization-options.markdown
@@ -28,7 +28,7 @@ sprites.
### Options per Sprite Map
-When constructing the sprite map, the entire sprite map and it's associated stylesheet
+When constructing the sprite map, the entire sprite map and its 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
@@ -36,7 +36,7 @@ the sprites were contained within a folder called `icon`.
* `$