Compare commits

..

No commits in common. "master" and "stable" have entirely different histories.

112 changed files with 2612 additions and 2740 deletions

12
Gemfile
View File

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

View File

@ -1,141 +0,0 @@
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

View File

@ -29,16 +29,6 @@ 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. To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
END 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" desc "Compile Examples into HTML and CSS"
task :examples do task :examples do
linked_haml = "tests/haml" linked_haml = "tests/haml"

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View File

@ -14,36 +14,10 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
The Documentation for the [latest preview release](http://beta.compass-style.org/) 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) 0.11.6 (UNRELEASED)
------------------- -------------------
* Added `user-select` mixin to control the selection model and granularity of an element. * 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`.
It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
0.11.5 (07/10/2011) 0.11.5 (07/10/2011)
------------------- -------------------

View File

@ -175,28 +175,6 @@ later on.
Defaults to <code>http_path + "/" + images_dir</code>. Defaults to <code>http_path + "/" + images_dir</code>.
</td> </td>
</tr> </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> <tr>
<td style="vertical-align:top;"><code>javascripts_dir</code> </td> <td style="vertical-align:top;"><code>javascripts_dir</code> </td>
<td style="vertical-align:top;">String </td> <td style="vertical-align:top;">String </td>

View File

@ -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. 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 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 rule. if you do not wish to abide by this rool.
**Step 1**: If you do not have a github account, create one. **Step 1**: If you do not have a github account, create one.

View File

@ -5,16 +5,12 @@ crumb: Spriting
classnames: classnames:
- tutorial - tutorial
--- ---
# Spriting with Compass # Spriting with Compass
Spriting has never been easier with Compass. You place the sprite images in a folder, 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 import them into your stylesheet, and then you can use the sprite in your selectors in one
of several convenient ways. of several convenient ways.
## Sprite Tutorial Contents
<%= sprite_tutorial_links(true) %>
## Setup ## Setup
For this tutorial, let's imagine that in your project's image folder there are four icons: For this tutorial, let's imagine that in your project's image folder there are four icons:
@ -27,9 +23,6 @@ For this tutorial, let's imagine that in your project's image folder there are f
Each is an icon that is 32px square. Each is an icon that is 32px square.
## Basic Usage ## 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: The simplest way to use these icon sprites is to let compass give you a class for each sprite:
@import "icon/*.png"; @import "icon/*.png";
@ -52,9 +45,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 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 that is customized for your sprites](https://gist.github.com/729507). This
stylesheet is [magic](/help/tutorials/spriting/magic-imports), it is not written to disk, and it can be customized 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 section below on by setting configuration variables before you import it. See the section below on
[Customization Options](/help/tutorials/spriting/customization). The goal of this stylesheet is to provide a [Customization Options](#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 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 should never have to care what the is name of the generated sprite map, nor where a sprite
is located within it. is located within it.
@ -108,6 +101,102 @@ 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 sprites, you may find that hand crafting the import will speed up compilation times. See
the section on [performance considerations](#performance) for more details. 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> <a name="performance"></a>
## Performance Considerations ## Performance Considerations

View File

@ -1,45 +0,0 @@
---
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%`.

View File

@ -1,74 +0,0 @@
---
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)
}

View File

@ -1,69 +0,0 @@
---
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

View File

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

View File

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

View File

@ -12,7 +12,6 @@ documented_functions:
- "stylesheet-url" - "stylesheet-url"
- "font-url" - "font-url"
- "image-url" - "image-url"
- "generated-image-url"
--- ---
%h1 Compass URL Helpers %h1 Compass URL Helpers
@ -32,7 +31,7 @@ documented_functions:
Generates a path to an asset found relative to the project's css directory. Generates a path to an asset found relative to the project's css directory.
%br %br
Passing a true value as the second argument will cause the only the path to be returned Passing a true value as the second argument will cause the only the path to be returned
instead of a <code>url()</code> function instead of a `url()` function
#font-url.helper #font-url.helper
%h3 %h3
@ -43,7 +42,7 @@ documented_functions:
Generates a path to an asset found relative to the project's font directory. Generates a path to an asset found relative to the project's font directory.
%br %br
Passing a true value as the second argument will cause the only the path to be returned Passing a true value as the second argument will cause the only the path to be returned
instead of a <code>url()</code> function instead of a `url()` function
#image-url.helper #image-url.helper
%h3 %h3
@ -54,27 +53,9 @@ documented_functions:
Generates a path to an asset found relative to the project's images directory. Generates a path to an asset found relative to the project's images directory.
%p %p
Passing a true value as the second argument will cause the only the path to be returned Passing a true value as the second argument will cause the only the path to be returned
instead of a <code>url()</code> function instead of a `url()` function
%p %p
The third argument is used to control the cache buster on a per-use basis. The third argument is used to control the cache buster on a per-use basis.
When set to <code>false</code> no cache buster will be used. When a string, that When set to `false` no cache buster will be used. When a string, that
value will be used as the cache buster. 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.

View File

@ -0,0 +1,70 @@
$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

View File

@ -0,0 +1,17 @@
.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)

View File

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

View File

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

View File

@ -0,0 +1,113 @@
//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; }
}

View File

@ -0,0 +1,29 @@
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;
}

View File

@ -0,0 +1,99 @@
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;} }

View File

@ -0,0 +1,10 @@
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; }
}

View File

@ -0,0 +1,21 @@
$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; }

View File

@ -0,0 +1,63 @@
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;
}

View File

@ -0,0 +1,96 @@
.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; } }

View File

@ -0,0 +1,31 @@
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)";
}
}

View File

@ -0,0 +1,275 @@
@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; }
}
}

View File

@ -0,0 +1,47 @@
@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; }

View File

@ -0,0 +1,216 @@
@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; }
}
}

View File

@ -0,0 +1,113 @@
// 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; }
}

View File

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

View File

@ -0,0 +1,120 @@
$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; }
}

View File

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

View File

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

View File

@ -1,7 +1,6 @@
# All files in the 'lib' directory will be loaded # All files in the 'lib' directory will be loaded
# before nanoc starts compiling. # before nanoc starts compiling.
require 'erb'
require 'active_support/inflector'
include Nanoc3::Helpers::LinkTo include Nanoc3::Helpers::LinkTo
include Nanoc3::Helpers::Capturing include Nanoc3::Helpers::Capturing
include Nanoc3::Helpers::Rendering include Nanoc3::Helpers::Rendering
@ -138,16 +137,3 @@ def long_compass_version
require 'compass/commands' require 'compass/commands'
Compass::Commands::PrintVersion.long_output_string Compass::Commands::PrintVersion.long_output_string
end 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

View File

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

View File

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

View File

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

View File

@ -133,7 +133,6 @@ end
Then "the following files are reported removed:" do |table| Then "the following files are reported removed:" do |table|
table.rows.each do |css_file| 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} Then %Q{a css file #{css_file.first} is reported removed}
end end
end end

View File

@ -6,8 +6,6 @@
// * $font-files is required using font-files('relative/location', 'format'). // * $font-files is required using font-files('relative/location', 'format').
// for best results use this order: woff, opentype/truetype, svg // for best results use this order: woff, opentype/truetype, svg
// * $eot is required by IE, and is a relative location of the eot file. // * $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 // * For android 2.2 Compatiblity, please ensure that your web page has
// a meta viewport tag. // a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided // * To support iOS < 4.2, an SVG file must be provided
@ -15,20 +13,13 @@
// If you need to generate other formats check out the Font Squirrel // If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator) // [font generator](http://www.fontsquirrel.com/fontface/generator)
// //
// Example:
// 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 // @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot")
// 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( @mixin font-face(
$name, $name,
$font-files, $font-files,
$eot: false, $eot: false
$weight: false,
$style: false
) { ) {
$iefont: unquote("#{$eot}?iefix"); $iefont: unquote("#{$eot}?iefix");
@font-face { @font-face {
@ -38,26 +29,5 @@
$font-files: font-url($iefont) unquote("format('eot')"), $font-files; $font-files: font-url($iefont) unquote("format('eot')"), $font-files;
} }
src: $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;
// }

View File

@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default;
@include sprite-dimensions($map, $sprite); @include sprite-dimensions($map, $sprite);
} }
@if not $disable-magic-sprite-selectors { @if not $disable-magic-sprite-selectors {
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y); @include sprite-selectors($map, $sprite, $sprite);
} }
} }
// Include the selectors for the `$sprite` given the `$map` and the // Include the selectors for the `$sprite` given the `$map` and the
// `$full-sprite-name` // `$full-sprite-name`
// @private // @private
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) { @mixin sprite-selectors($map, $sprite-name, $full-sprite-name) {
@each $selector in $sprite-selectors { @each $selector in $sprite-selectors {
@if sprite_has_selector($map, $sprite-name, $selector) { @if sprite_has_selector($map, $sprite-name, $selector) {
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} { &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y); @include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
} }
} }
} }
@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default;
// If a base class is provided, then each class will extend it. // If a base class is provided, then each class will extend it.
// //
// If `$dimensions` is `true`, the sprite dimensions will specified. // If `$dimensions` is `true`, the sprite dimensions will specified.
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) { @mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map)) {
@each $sprite-name in $sprite-names { @each $sprite-name in $sprite-names {
@if sprite_does_not_have_parent($map, $sprite-name) { @if sprite_does_not_have_parent($map, $sprite-name) {
$full-sprite-name: "#{$prefix}-#{$sprite-name}"; $full-sprite-name: "#{$prefix}-#{$sprite-name}";
.#{$full-sprite-name} { .#{$full-sprite-name} {
@if $base-class { @extend #{$base-class}; } @if $base-class { @extend #{$base-class}; }
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y); @include sprite($map, $sprite-name, $dimensions);
} }
} }
} }

View File

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

View File

@ -24,10 +24,8 @@ module Compass
end end
def configuration def configuration
config = Compass::Configuration::Data.new('rails') Compass::Configuration::Data.new('rails').
config.extend(ConfigurationDefaults) 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 end
def env def env
@ -50,32 +48,17 @@ module Compass
end end
end end
def check_for_double_boot! def initialize!(config = nil)
if booted? if booted?
Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your initializer.") Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your intializer.")
else else
booted! booted!
end 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) config ||= Compass.detect_configuration_file(root)
Compass.add_project_configuration(config, :project_type => :rails) Compass.add_project_configuration(config, :project_type => :rails)
Compass.discover_extensions! Compass.discover_extensions!
Compass.configure_sass_plugin! Compass.configure_sass_plugin!
Compass.handle_configuration_change! if sass_plugin_enabled? || rails_compilation_enabled? Compass.handle_configuration_change!
end end
end end
end end

View File

@ -1,10 +0,0 @@
%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

View File

@ -1,11 +0,0 @@
# 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

View File

@ -1,5 +0,0 @@
# 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

View File

@ -1,26 +0,0 @@
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

View File

@ -1,89 +0,0 @@
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

View File

@ -1,52 +1,6 @@
module Compass module Compass
module AppIntegration module AppIntegration
module Rails 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 module ConfigurationDefaults
def project_type_without_default def project_type_without_default
@ -54,8 +8,12 @@ module Compass
end end
def default_sass_dir def default_sass_dir
if Sass::Util.ap_geq?('3.1.0.beta')
File.join("app", "assets", "stylesheets")
else
File.join("app", "stylesheets") File.join("app", "stylesheets")
end end
end
def default_css_dir def default_css_dir
File.join("public", "stylesheets") File.join("public", "stylesheets")
@ -70,25 +28,27 @@ module Compass
end end
def default_javascripts_dir def default_javascripts_dir
if Sass::Util.ap_geq?('3.1.0.beta')
File.join("app", "assets", "javascripts")
else
File.join("public", "javascripts") File.join("public", "javascripts")
end end
end
def default_http_images_path def default_http_images_path
# Relies on the fact that this will be loaded after the "normal" "#{top_level.http_path}images"
# defaults, so that method_missing finds http_root_relative
http_root_relative "images"
end end
def default_http_javascripts_path def default_http_javascripts_path
http_root_relative "javascripts" "#{top_level.http_path}javascripts"
end end
def default_http_fonts_path def default_http_fonts_path
http_root_relative "fonts" "#{top_level.http_path}fonts"
end end
def default_http_stylesheets_path def default_http_stylesheets_path
http_root_relative "stylesheets" "#{top_level.http_path}stylesheets"
end end
def default_extensions_dir def default_extensions_dir

View File

@ -3,15 +3,25 @@ unless defined?(Compass::RAILS_LOADED)
begin begin
require 'action_pack/version' require 'action_pack/version'
if ActionPack::VERSION::MAJOR >= 3 if ActionPack::VERSION::MAJOR >= 3
if ActionPack::VERSION::MINOR < 1 # TODO figure something out so image_path works with rails integration
require 'compass/app_integration/rails/actionpack30' %w(railtie).each do |lib|
else require "compass/app_integration/rails/actionpack3/#{lib}"
require 'compass/app_integration/rails/actionpack31'
end end
else else
require 'compass/app_integration/rails/actionpack2x' %w(action_controller sass_plugin urls).each do |lib|
require "compass/app_integration/rails/actionpack2/#{lib}"
end end
rescue LoadError, NameError end
rescue LoadError => e
$stderr.puts "Compass could not access the rails environment."
rescue NameError => e
$stderr.puts "Compass could not access the rails environment." $stderr.puts "Compass could not access the rails environment."
end 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 end

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,38 +18,12 @@ module Compass
class Data class Data
attr_reader :name attr_reader :name
extend Sass::Callbacks
include Compass::Configuration::Inheritance include Compass::Configuration::Inheritance
include Compass::Configuration::Serialization include Compass::Configuration::Serialization
include Compass::Configuration::Adapters include Compass::Configuration::Adapters
extend Compass::Configuration::Paths 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 *ATTRIBUTES
inherited_accessor :required_libraries, :loaded_frameworks, :framework_path #XXX we should make these arrays add up cumulatively. inherited_accessor :required_libraries, :loaded_frameworks, :framework_path #XXX we should make these arrays add up cumulatively.
@ -164,6 +138,16 @@ module Compass
relative_assets || http_images_path == :relative relative_assets || http_images_path == :relative
end end
def run_callback(event, *args)
begin
send(:"run_#{event}", *args)
rescue NoMethodError => e
unless e.message =~ /run_#{event}/
raise
end
end
end
private private
def assert_valid_keys!(attr_hash) def assert_valid_keys!(attr_hash)

View File

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

View File

@ -1,6 +1,28 @@
module Compass module Compass
module Configuration module Configuration
class FileData < Data 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) def self.new_from_file(config_file, defaults = nil)
data = new(config_file) data = new(config_file)
data.with_defaults(defaults) do data.with_defaults(defaults) do

View File

@ -68,22 +68,15 @@ module Compass
end end
unless @callbacks_loaded unless @callbacks_loaded
Sass::Plugin.on_updating_stylesheet do |sass_file, css_file| Sass::Plugin.on_updating_stylesheet do |sass_file, css_file|
Compass.configuration.run_stylesheet_saved(css_file) Compass.configuration.run_callback(:stylesheet_saved, css_file)
end end
Sass::Plugin.on_compilation_error do |e, filename, css| Sass::Plugin.on_compilation_error do |e, filename, css|
Compass.configuration.run_stylesheet_error(filename, e.message) Compass.configuration.run_callback(:stylesheet_error, filename, e.message)
end end
@callbacks_loaded = true @callbacks_loaded = true
end end
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 def sass_engine_options
configuration.to_sass_engine_options configuration.to_sass_engine_options
end end

View File

@ -61,19 +61,6 @@ module Compass
inherited_writer(*attributes) inherited_writer(*attributes)
end 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 end

View File

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

View File

@ -1,39 +1,10 @@
module Compass::SassExtensions::Functions::FontFiles module Compass::SassExtensions::Functions::FontFiles
FONT_TYPES = {
:woff => 'woff',
:otf => 'opentype',
:opentype => 'opentype',
:ttf => 'truetype',
:truetype => 'truetype',
:svg => 'svg'
}
def font_files(*args) def font_files(*args)
raise Sass::SyntaxError, "An even number of arguments must be passed to font_files()" unless args.size % 2 == 0
files = [] files = []
args_length = args.length while args.size > 0
skip_next = false files << "#{font_url(args.shift)} format('#{args.shift}')"
args.each_with_index do |arg, index|
if skip_next
skip_next = false
next
end 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(", ")) Sass::Script::String.new(files.join(", "))
end end
end end

View File

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

View File

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

View File

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

View File

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

View File

@ -1,24 +1,5 @@
module Compass::SassExtensions::Functions::Urls 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)) def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
# Compute the path to the stylesheet, either root relative or stylesheet relative # 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. # or nil if the http_images_path is not set in the configuration.
@ -37,15 +18,9 @@ module Compass::SassExtensions::Functions::Urls
clean_url(path) clean_url(path)
end end
end end
end Sass::Script::Functions.declare :stylesheet_url, [:path]
Sass::Script::Functions.declare :stylesheet_url, [:path, :only_path]
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)) def font_url(path, only_path = Sass::Script::Bool.new(false))
path = path.value # get to the string value of the literal. path = path.value # get to the string value of the literal.
@ -70,16 +45,9 @@ module Compass::SassExtensions::Functions::Urls
clean_url(path) clean_url(path)
end end
end end
end Sass::Script::Functions.declare :font_url, [:path]
Sass::Script::Functions.declare :font_url, [:path, :only_path]
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)) 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. path = path.value # get to the string value of the literal.
@ -136,68 +104,9 @@ module Compass::SassExtensions::Functions::Urls
clean_url(path) clean_url(path)
end end
end end
end Sass::Script::Functions.declare :image_url, [:path]
Sass::Script::Functions.declare :image_url, [:path, :only_path]
module GeneratedImageUrl Sass::Script::Functions.declare :image_url, [:path, :only_path, :cache_buster]
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 private

View File

@ -7,10 +7,8 @@ module Compass
end end
end 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/image'
require 'compass/sass_extensions/sprites/layout_methods'
require 'compass/sass_extensions/sprites/sprite_methods' require 'compass/sass_extensions/sprites/sprite_methods'
require 'compass/sass_extensions/sprites/image_methods' require 'compass/sass_extensions/sprites/image_methods'
require 'compass/sass_extensions/sprites/sprite_map' require 'compass/sass_extensions/sprites/sprite_map'

View File

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

View File

@ -1,47 +0,0 @@
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

View File

@ -1,121 +0,0 @@
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

View File

@ -1,86 +0,0 @@
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

View File

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

View File

@ -14,6 +14,7 @@ module Compass
@width = 0 @width = 0
init_images init_images
compute_image_positions! compute_image_positions!
@height = @images.last.top + @images.last.height
init_engine init_engine
end end
@ -28,10 +29,22 @@ module Compass
def init_images def init_images
@images = image_names.collect do |relative_file| @images = image_names.collect do |relative_file|
image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs) image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs)
@width = [ @width, image.width + image.offset ].max
image image
end end
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 # Validates that the sprite_names are valid sass
def validate! def validate!
for sprite_name in sprite_names for sprite_name in sprite_names
@ -43,7 +56,7 @@ module Compass
# The on-the-disk filename of the sprite # The on-the-disk filename of the sprite
def filename def filename
File.join(Compass.configuration.generated_images_path, "#{path}-s#{uniqueness_hash}.png") File.join(Compass.configuration.images_path, "#{path}-s#{uniqueness_hash}.png")
end end
# Generate a sprite image if necessary # Generate a sprite image if necessary
@ -53,7 +66,7 @@ module Compass
cleanup_old_sprites cleanup_old_sprites
end end
engine.construct_sprite engine.construct_sprite
Compass.configuration.run_sprite_generated(engine.canvas) Compass.configuration.run_callback(:sprite_generated, engine.canvas)
save! save!
end end
end end
@ -87,9 +100,8 @@ module Compass
# Saves the sprite engine # Saves the sprite engine
def save! def save!
FileUtils.mkdir_p(File.dirname(filename))
saved = engine.save(filename) saved = engine.save(filename)
Compass.configuration.run_sprite_saved(filename) Compass.configuration.run_callback(:sprite_saved, filename)
saved saved
end end

View File

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

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

View File

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

View File

@ -50,6 +50,7 @@ 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 { 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; } 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 { 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; } display: block; }

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

View File

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

Some files were not shown because too many files have changed in this diff Show More