Merge branch 'master' into stable

Conflicts:
	Gemfile
	lib/compass/sass_extensions/functions.rb
	lib/compass/sass_extensions/functions/trig.rb
	test/units/sass_extensions_test.rb
This commit is contained in:
Chris Eppstein 2012-03-11 18:30:25 -07:00
commit c8174b5679
194 changed files with 4308 additions and 3864 deletions

View File

@ -1,6 +1,7 @@
rvm: rvm:
- 1.8.7 - 1.8.7
- 1.9.2 - 1.9.2
- 1.9.3
- jruby - jruby
- rbx - rbx
- ree - ree

29
Gemfile
View File

@ -2,28 +2,27 @@ source :rubygems
gemspec gemspec
gem "cucumber", "~> 0.9.2" gem "cucumber", "~> 1.1.4"
gem "rspec", "~>2.0.0" gem "rspec", "~>2.0.0"
gem "rails", "~>3.0.0.rc" gem "rails", "~> 3.1"
gem "compass-validator", "3.0.1" 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 "rubyzip" gem "rubyzip"
gem "livereload"
gem "ruby-prof", :platform => :mri_18
gem 'autotest'
gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
gem 'mocha' gem 'mocha'
gem 'timecop'
gem 'diff-lcs', '~> 1.1.2' gem 'diff-lcs', '~> 1.1.2'
gem 'rake', '~> 0.9.2'
gem 'rake', '0.8.7' # Warning becarful adding OS dependant gems above this line it will break the CI server please
# place them below so they are excluded
group :mac do unless ENV["CI"]
gem "rb-fsevent" gem 'rb-fsevent'
gem 'growl_notify'
gem "ruby-prof", :platform => :mri_18
gem "rcov", :platform => :mri_18
gem 'guard'
gem 'guard-test'
gem 'guard-cucumber'
end end

16
Guardfile Normal file
View File

@ -0,0 +1,16 @@
group :tests do
guard :test do
watch(%r{^lib/(.+)\.rb$}) { |m| "test/#{m[1]}_test.rb" }
watch(%r{^test/.+_test\.rb$})
watch(%r{^test/units/.+_test\.rb$})
watch('test/test_helper.rb') { "test" }
end
end
group :features do
guard :cucumber do
watch(%r{^features/.+\.feature$})
watch(%r{^features/support/.+$}) { 'features' }
watch(%r{^features/step_definitions/(.+)_steps\.rb$}) { |m| Dir[File.join("**/#{m[1]}.feature")][0] || 'features' }
end
end

View File

@ -1,4 +1,7 @@
# Compass # Compass
Build Status: ![Build Status](https://secure.travis-ci.org/chriseppstein/compass.png)
A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks: A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks:
- [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki] - [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki]

View File

@ -1,6 +1,7 @@
require 'rubygems' require 'rubygems'
require 'bundler' require 'bundler'
Bundler.setup Bundler.setup
require 'rake/dsl_definition' rescue nil
require 'compass' require 'compass'
# ----- Default: Testing ------ # ----- Default: Testing ------
@ -29,6 +30,16 @@ To run with an alternate version of Rails, make test/rails a symlink to that ver
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version. 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,5 +1,6 @@
--- ---
:major: 0 :major: 0
:minor: 11 :minor: 12
:patch: 7 :state: rc
:name: Antares :build: 1
:name: Alnilam

View File

@ -1,5 +0,0 @@
Autotest.add_discovery { 'rspec2' }

View File

@ -21,6 +21,10 @@ fallback_load_path(File.join(File.dirname(__FILE__), '..', 'lib')) do
require 'compass/exec' require 'compass/exec'
end end
if defined?(Bundler)
Bundler.require :assets
end
runner = Proc.new do runner = Proc.new do
Compass::Exec::SubCommandUI.new(ARGV).run! Compass::Exec::SubCommandUI.new(ARGV).run!
end end
@ -36,9 +40,5 @@ if ARGV.delete("--profile")
printer.print(STDERR, 0) printer.print(STDERR, 0)
exit exit_code exit exit_code
else else
if exit_code = runner.call exit runner.call || 1
exit exit_code
else
exit 1
end
end end

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,6 +1,7 @@
source :gemcutter source :gemcutter
gem 'nanoc3' gem 'nanoc3'
gem 'asdf'
gem 'rdiscount' gem 'rdiscount'
gem 'thor' gem 'thor'
gem 'rack' gem 'rack'
@ -8,12 +9,13 @@ gem 'mime-types'
gem 'serve', "1.0.0" gem 'serve', "1.0.0"
gem 'nokogiri' gem 'nokogiri'
gem 'coderay' gem 'coderay'
gem 'sass', ">= 3.1" gem 'haml'
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-susy-plugin', ">=0.7.0.pre8" gem 'compass-theme', :path => '../../compass-theme' #:git => 'git://github.com/Compass/compass-theme.git'
gem 'css-slideshow', "0.2.0" # gem 'compass-susy-plugin', ">=0.7.0.pre8"
# 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,57 +1,68 @@
PATH PATH
remote: .. remote: ..
specs: specs:
compass (0.11.5.38ccee8) compass (0.12.rc.0.c403ac9)
chunky_png (~> 1.2) chunky_png (~> 1.2)
fssm (>= 0.2.7) fssm (>= 0.2.7)
sass (~> 3.1) sass (~> 3.1)
PATH
remote: ../../compass-theme
specs:
compass-theme (0.0.2)
compass (~> 0.11)
compass-susy-plugin (~> 0.7.0)
css-slideshow (= 0.2.0)
GEM GEM
remote: http://rubygems.org/ remote: http://rubygems.org/
specs: specs:
activesupport (3.0.7) activesupport (3.0.10)
builder (2.1.2) asdf (0.5.0)
rack (~> 1.2.1)
builder (3.0.0)
chunky_png (1.2.5) chunky_png (1.2.5)
coderay (0.9.7) coderay (0.9.7)
compass-susy-plugin (0.9.beta.3) compass-susy-plugin (0.7.0)
compass (>= 0.11.beta.3) compass (>= 0.10.0)
cri (2.0.2) 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.8.1)
haml (3.1.0) haml (3.1.2)
i18n (0.4.2) i18n (0.4.2)
json (1.5.1) json (1.5.4)
mime-types (1.16) mime-types (1.16)
nanoc3 (3.2.2) nanoc3 (3.2.2)
cri (~> 2.0) cri (~> 2.0)
nokogiri (1.4.4) nokogiri (1.4.4)
rack (1.2.2) rack (1.2.2)
rake (0.8.7) rake (0.9.2)
rb-fsevent (0.4.0) rb-fsevent (0.4.0)
rdiscount (1.6.8) rdiscount (1.6.8)
ruby-prof (0.9.2) ruby-prof (0.10.8)
sass (3.1.0) sass (3.1.12)
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.26) tzinfo (0.3.29)
PLATFORMS PLATFORMS
ruby ruby
DEPENDENCIES DEPENDENCIES
activesupport (~> 3.0.10)
asdf
builder builder
coderay coderay
compass! compass!
compass-susy-plugin (>= 0.7.0.pre8) compass-theme!
css-slideshow (= 0.2.0)
css_parser (= 1.0.1) css_parser (= 1.0.1)
haml (>= 3.1) haml
json json
mime-types mime-types
nanoc3 nanoc3
@ -61,6 +72,5 @@ DEPENDENCIES
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,6 +63,7 @@ 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.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -4,15 +4,38 @@ function showInstallCommand() {
var notes = []; var notes = [];
var project_name = "&lt;myproject>"; var project_name = "&lt;myproject>";
var can_be_bare = true; var can_be_bare = true;
commands.push("$ gem install compass"); var in_working_dir = false;
var use_bundler = false;
if ($("#app-type").val() != "rails") {
commands.push("$ gem install compass");
}
if (cmd == "init") { if (cmd == "init") {
commands.push("$ cd " + project_name); commands.push("$ cd " + project_name);
in_working_dir = true
project_name = "."; project_name = ".";
$(".creating").hide();
} else {
$(".creating").show();
if ($("#project_name").val() != "")
project_name = $("#project_name").val();
}
if ($("#app-type").val() == "rails") {
notes.push("<p class='note warning'>Rails 2.3 and 3.0 users require additional installation steps. For full rails installation and upgrade instructions please refer to the compass-rails <a href='https://github.com/Compass/compass-rails/blob/master/README.md'>README</a>.</p>");
use_bundler = true;
} }
if ($("#app-type").val() == "rails") { if ($("#app-type").val() == "rails") {
if (cmd == "create") { if (cmd == "create") {
commands.push("$ rails new " + project_name); commands.push("$ rails new " + project_name);
commands.push("$ cd " + project_name);
in_working_dir = true
project_name = ".";
} }
commands.push("> Edit Gemfile and add this:");
commands.push(" group :assets do");
commands.push(" gem 'compass-rails'");
commands.push(" # Add any compass extensions here");
commands.push(" end");
commands.push("$ bundle");
cmd = "init rails"; cmd = "init rails";
can_be_bare = false; can_be_bare = false;
} else if ($("#app-type").val() == "other") { } else if ($("#app-type").val() == "other") {
@ -28,9 +51,12 @@ function showInstallCommand() {
var framework = $("#framework").val(); var framework = $("#framework").val();
var create_command; var create_command;
if (cmd == "install") { if (cmd == "install") {
create_command = "$ compass install " + framework + " " + project_name; create_command = "$ compass install " + framework;
} else { } else {
create_command = "$ compass " + cmd + " " + project_name; create_command = "$ compass " + cmd;
}
if (!in_working_dir) {
create_command = create_command + " " + project_name;
} }
if (framework != "compass" && framework != "bare" && cmd != "install") { if (framework != "compass" && framework != "bare" && cmd != "install") {
create_command = create_command + " --using " + framework; create_command = create_command + " --using " + framework;
@ -46,14 +72,20 @@ function showInstallCommand() {
} }
if ($("#options").val() == "customized") { if ($("#options").val() == "customized") {
$("#directories").show(); $("#directories").show();
create_command = create_command + if ($("#sassdir").val() != "")
" --sass-dir \"" + $("#sassdir").val() + "\"" + create_command += " --sass-dir \"" + $("#sassdir").val() + "\"";
" --css-dir \"" + $("#cssdir").val() + "\"" + if ($("#cssdir").val() != "")
" --javascripts-dir \"" + $("#jsdir").val() + "\"" + create_command += " --css-dir \"" + $("#cssdir").val() + "\"";
" --images-dir \"" + $("#imagesdir").val() + "\""; if ($("#jsdir").val() != "")
create_command += " --javascripts-dir \"" + $("#jsdir").val() + "\"";
if ($("#imagesdir").val() != "")
create_command += " --images-dir \"" + $("#imagesdir").val() + "\"";
} else { } else {
$("#directories").hide(); $("#directories").hide();
} }
if (use_bundler) {
create_command = "$ bundle exec " + create_command.replace(/\$ /,'');
}
commands.push(create_command); commands.push(create_command);
var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>"; var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>";
if (instructions.match(/&lt;/)) { if (instructions.match(/&lt;/)) {

View File

@ -14,6 +14,92 @@ 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.rc.2 (03/11/2012)
----------------------
### Stylesheet Changes
* Improved [hide-text mixin](/reference/compass/typography/text/replacement/#mixin-hide-text) for better performance and accessibility.
* Added [squish-text mixin](/reference/compass/typography/text/replacement/#mixin-squish-text) to hide text on inline elements.
* Compass css3 transitions module now correctly handled transitioning of
prefixed properties.
### Misc Changes
* Fix the mime-type of embedded `woff` font files. Add support for Embedded OpenType fonts.
* New math functions are now available: `e()`, `log($number[, $base = e()])`, `sqrt($number)`
and `pow($number, $exponent)`
0.12.rc.1 (02/02/2012)
----------------------
Give warnings for users who upgrade without knowing about the compass-rails gem.
0.12.rc.0 (01/31/2012)
----------------------
### Stylesheet Changes
* Removed -ms prefix from box-sizing
* Added sprite_names sass function
* Added -ms prefix to transitions
### Command Line
* Added support for `--debug-info` and `--no-debug-info` to the compass compile command
### Rails Integration
Rails projects must now use the [`compass-rails`](https://github.com/compass/compass-rails)
gem to integrate with compass. Please read the [README](https://github.com/Compass/compass-rails/blob/master/README.md) for upgrade instructions. More information in this [blog post](/blog/2012/01/29/compass-and-rails-integration/).
0.12.alpha.3 (12/23/2011)
-------------------------
* The `$round-to-nearest-half-line` config variable was added. When
true, the vertical rhythm module will round line heights to the
nearest half-line to avoid awkwardly large gaps between lines of text.
Defaults to false.
* Added `reset-baseline` to the vertical rhythm module so you can force the baseline to reset.
* Merges in the stable changes between 0.11.5 and 0.11.6.
0.12.alpha.2 (11/28/2011)
-------------------------
* Bug fixes for Rails 2.x applications.
0.12.alpha.1 (11/14/2011)
-------------------------
* 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
* log sprite generation and removal to the console
* Added a new helper function `compass-env()` that returns the current compass environment (development, production)
* Added the ability to inline a sprite image by setting `$<map>-inline:true` before you call `@import`
* Removed `-khtml` prefixes by default you can still enable them by setting `$experimental-support-for-khtml:true;`
* Improved rails 3.1 integration
* `true` and `false` are now valid sprite names
* Removed deprecated forms of the box-shadow, text-shadow, and transform
mixins.
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_load_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.8 (02/26/2012) 0.11.8 (02/26/2012)
------------------- -------------------

View File

@ -39,7 +39,7 @@ crumb: Plugins and frameworks
%a %a
http://compass-style.org http://compass-style.org
%td %td
You are currently vising the Compass docs. You are currently viewing the Compass docs.
%tr %tr
%td Blueprint %td Blueprint
%td 0.8.0 %td 0.8.0

View File

@ -19,7 +19,7 @@ layout: default
1. [**Contribute to Compass**](/help/tutorials/contributing). 1. [**Contribute to Compass**](/help/tutorials/contributing).
2. [**Develop a Compass Extension**](/help/tutorials/extensions). 2. [**Develop a Compass Extension**](/help/tutorials/extensions).
3. [**Contribute to Sass Recipies**](http://chriseppstein.github.com/sass-recipes/). 3. [**Contribute to Sass Recipes**](http://chriseppstein.github.com/sass-recipes/).
4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users). 4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users).
## Help Others ## Help Others

View File

@ -143,7 +143,7 @@ later on.
<td style="vertical-align:top;"><code>sass_dir</code> </td> <td style="vertical-align:top;"><code>sass_dir</code> </td>
<td style="vertical-align:top;">String </td> <td style="vertical-align:top;">String </td>
<td style="vertical-align:top;">The directory where the sass stylesheets are kept. <td style="vertical-align:top;">The directory where the sass stylesheets are kept.
It is relative to the <code>project_path</code>. Defaults to <code>"src"</code>. It is relative to the <code>project_path</code>. Defaults to <code>"sass"</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -170,11 +170,33 @@ later on.
</tr> </tr>
<tr> <tr>
<td style="vertical-align:top;"><code>http_images_path</code> </td> <td style="vertical-align:top;"><code>http_images_path</code> </td>
<td style="vertical-align:top;">String </td> <td style="vertical-align:top;">String</td>
<td style="vertical-align:top;">The full http path to images on the web server. <td style="vertical-align:top;">The full http path to images on the web server.
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>
@ -287,6 +309,13 @@ later on.
Defaults to <code>{:compression => Zlib::BEST_COMPRESSION}</code>. See the chunky_png <a href='https://github.com/wvanbergen/chunky_png/wiki/Constraints' _target='blank'>wiki</a> for more information Defaults to <code>{:compression => Zlib::BEST_COMPRESSION}</code>. See the chunky_png <a href='https://github.com/wvanbergen/chunky_png/wiki/Constraints' _target='blank'>wiki</a> for more information
</td> </td>
</tr> </tr>
<tr>
<td style="vertical-align:top;"><code>sprite_load_path</code></td>
<td style="vertical-align:top;">Array </td>
<td style="vertical-align:top;">
Defaults to <code> [images_path] </code>
</td>
</tr>
</table> </table>
<a name="configuration-functions"></a> <a name="configuration-functions"></a>

View File

@ -10,10 +10,10 @@ Contributing Stylesheets to Compass
Thank you for your interest in contributing to Compass. Our goal is to make it as easy Thank you for your interest in contributing to Compass. Our goal is to make it as easy
as we can for you to contribute changes to compass -- So if there's something here that as we can for you to contribute changes to compass -- So if there's something here that
seems harder than it aught to be, please let us know. seems harder than it ought 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 rool. if you do not wish to abide by this rule.
**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

@ -0,0 +1,71 @@
---
title: Removing Vendor Prefixes from Compass Stylesheets
layout: tutorial
crumb: Removing Vendor Prefixes from Compass
classnames:
- tutorial
---
# Removing Vendor Prefixes from Compass Stylesheets
Compass makes it easy to code many of the CSS3 vendor prefixed properties, without having to type it all out by hand.
## Easy Vendor Prefixes
Let's say you wanted to add a border radius to an element like this:
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
With Compass it's easier to use the `border-radius` mixin:
.round {
@include border-radius(4px);
}
That mixin will create all of the vendor prefixed CSS properties you need, with much less of a chance of a typo or inconsistent display. It will also take care of any browser specific implementations of the CSS property that don't match up to the W3C specification.
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
## Problem
The problem with that solution, as good as it is, is that all of those browser prefixes will cruft up your stylesheet quickly if you use a lot of them, and/or aren't using `@extend` to keep them to a minimum.
Of particular note are the generated Opera `(-o-border-radius)` and Konquerer `(-khtml-border-radius)` properties, which are added to create support for those browsers. As great as those browsers may be, they often account for a very small minority of a website's traffic, traffic that may not compensate for the full weight of their support when using experimental CSS3 properties.
## Solution
Thankfully, Compass includes a selection of default boolean variables that you can override, allowing you to globally turn off the support for the various vendor prefixes:
$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$support-for-original-webkit-gradients : true !default;
$experimental-support-for-opera : true !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : true !default;
If you set any of the above variables to `false`, Compass will skip those prefixes when it processes your stylesheet.
So to exclude Opera and Konquerer vendor prefixes from your CSS, add the following code just above your include of the CSS3 module in your base SCSS file:
$experimental-support-for-opera:false;
$experimental-support-for-khtml:false;
@import "compass/css3";
The resultant output will be as follow:
.round {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}

View File

@ -125,7 +125,7 @@ should attempt to adhere to unless there's a good reason not to do so.
pieces for faster load times when they're not using everything. pieces for faster load times when they're not using everything.
3. Use partials (files starting with an underscore) for stylesheets that are meant 3. Use partials (files starting with an underscore) for stylesheets that are meant
to be imported. If you do not Sass will generate css to be imported. If you do not Sass will generate css
files for your libaries in some configurations. files for your libraries in some configurations.
4. Provide a project template. If you do not, your project should only be 4. Provide a project template. If you do not, your project should only be
providing widgets or page designs, etc. providing widgets or page designs, etc.
@ -174,10 +174,13 @@ You may also see some real manifest files here:
### Manifest Declarations ### Manifest Declarations
**Easy Mode:** If you just have some basic files and nothing fancy going on, simply place this line in your manifest: **Easy Mode:** If you just have some basic files and nothing fancy going on, simply place this line in your manifest:
discover :all discover :all
If the file is missing `discover :all` is the default
This will cause compass to find all the files in your template and use the files' extension to determine where they should go. Alternatively, you can request that compass only discover files of a certain type. For example, the following will only discover javascript and image assets, you could then declare other file types on your own. This will cause compass to find all the files in your template and use the files' extension to determine where they should go. Alternatively, you can request that compass only discover files of a certain type. For example, the following will only discover javascript and image assets, you could then declare other file types on your own.
discover :javascripts discover :javascripts

View File

@ -9,6 +9,13 @@ classnames:
## Ruby on Rails ## Ruby on Rails
### Rails 3.1
Just add compass to your Gemfile like so:
gem 'compass'
Also checkout this [gist](https://gist.github.com/1184843)
### Rails 3 ### Rails 3
compass init rails /path/to/myrailsproject compass init rails /path/to/myrailsproject
### Rails 2.3 ### Rails 2.3
@ -16,26 +23,26 @@ classnames:
## Sinatra ## Sinatra
require 'compass'
require 'sinatra' require 'sinatra'
require 'haml' require 'haml'
require 'sass'
require 'compass'
configure do configure do
Compass.configuration do |config| set :haml, {:format => :html5, :escape_html => true}
config.project_path = File.dirname(__FILE__) set :scss, {:style => :compact, :debug_info => false}
config.sass_dir = 'views' Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.rb'))
end
set :haml, { :format => :html5 }
set :sass, Compass.sass_engine_options
end end
get '/screen.css' do get '/stylesheets/:name.css' do
content_type 'text/css', :charset => 'utf-8' content_type 'text/css', :charset => 'utf-8'
sass :screen scss(:"stylesheets/#{params[:name]}" )
end end
get '/' do
haml :index
end
If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly. If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly.
Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time! Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time!
@ -55,29 +62,31 @@ At the top of the Nanoc Rules file, load the Compass configuration, like this:
require 'compass' require 'compass'
Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10 Compass.add_project_configuration 'compass.rb' # when using Compass > 0.10
Compass.configuration.parse 'compass/config.rb' # when using Compass < 0.10 Compass.configuration.parse 'compass.rb' # when using Compass < 0.10
Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure): Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure):
http_path = "/" http_path = "/"
project_path = "." project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
css_dir = "output/assets/style" css_dir = "output/stylesheets"
sass_dir = "content/assets/style" sass_dir = "content/stylesheets"
images_dir = "output/assets/images" images_dir = "assets/images"
javascripts_dir = "assets/javascripts"
# when using SCSS: fonts_dir = "assets/fonts"
sass_options = { http_javascripts_dir = "javascripts"
:syntax => :scss http_stylesheets_dir = "stylesheets"
} http_images_dir = "images"
http_fonts_dir = "fonts"
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this: To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
filter :sass, Compass.sass_engine_options compile '/stylesheets/*' do
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
end
### Nanoc Projects using the formal approach ### Nanoc Projects using the formal approach
* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more. * [This Site](https://github.com/chriseppstein/compass/tree/master/doc-src)
* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass)

View File

@ -5,12 +5,16 @@ 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:
@ -21,8 +25,11 @@ For this tutorial, let's imagine that in your project's image folder there are f
* `images/icon/delete.png` * `images/icon/delete.png`
Each is an icon that is 32px square. Each is an icon that is 32px square.
<a name="basic-usage"></a>
## 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";
@ -47,14 +54,28 @@ Let's go over what happened there. The import statement told compass to [generat
stylesheet that is customized for your sprites](https://gist.github.com/729507). This stylesheet that is customized for your sprites](https://gist.github.com/729507). This
stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized stylesheet is [magic](#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](#customization-options). 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.
<a name="selector-control"></a> <a name='nested-folders' id='nested-folders'></a>
## Nested Folders
****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
Example:
@import "themes/orange/*.png";
@include all-orange-sprite;
<a name="selector-control" id="selector-control"></a>
## Selector Control ## Selector Control
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
If you want control over what selectors are generated, it is easy to do. In this example, If you want control over what selectors are generated, it is easy to do. In this example,
this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
on the name of the folder in which you've placed your icons. on the name of the folder in which you've placed your icons.
@ -81,9 +102,35 @@ And your stylesheet will compile to:
.actions .save { background-position: 0 -96px; } .actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; } .actions .delete { background-position: 0 0; }
<a name="magic-imports"></a> <a name="sass_functions" id="sass_functions"></a>
## Sass Functions
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
Getting the image dimensions of a sprite
You can get a unit value by using the magical dimension functions `<map>-sprite-height` and `<map>-sprite-width`
If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
Example:
@import "icon/*.png";
$box-padding: 5px;
$height: icon-sprite-height(some_icon);
$width: icon-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
<a name="magic-imports" id="magic-imports"></a>
## Magic Imports ## Magic Imports
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
As noted above, compass will magically create sprite stylesheets for you. Some people like As noted above, compass will magically create sprite stylesheets for you. Some people like
magic, some people are scared by it, and others are curious about how the magic works. If magic, some people are scared by it, and others are curious about how the magic works. If
you would like to avoid the magic, you can use compass to generate an import for you. On the you would like to avoid the magic, you can use compass to generate an import for you. On the
@ -101,103 +148,7 @@ 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> <a name="performance" id="performance"></a>
## Magic Selectors
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
* `selectors/ten-by-ten.png`
* `selectors/ten-by-ten_hover.png`
* `selectors/ten-by-ten_active.png`
* `selectors/ten-by-ten_target.png`
Now in our sass file we add:
@import "selectors/*.png";
a {
@include selectors-sprite(ten-by-ten)
}
And your stylesheet will compile to:
.selectors-sprite, a {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
a {
background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
background-position: 0 -20px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
background-position: 0 -30px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
background-position: 0 -10px;
}
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
.selectors-sprite, .selectors-ten-by-ten {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
.selectors-ten-by-ten {
background-position: 0 0;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
background-position: 0 -20px;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
background-position: 0 -30px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
background-position: 0 -10px;
}
<a name="customization-options"></a>
## Customization Options
### Options per Sprite Map
When constructing the sprite map, the entire sprite map and it's associated stylesheet
can be configured in the following ways. Each option is specified by setting a [configuration
variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
are named according to the name of the folder containing the sprites. In the examples below
the sprites were contained within a folder called `icon`.
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
E.g. `$icon-position: 100%`.
* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
E.g. `$icon-sprite-base-class: ".action-icon"`
* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
### Options per Sprite
When constructing the sprite map, each sprite can be configured in the following ways:
* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
<a name="performance"></a>
## Performance Considerations ## Performance Considerations
Reading PNG files and assembling new images and saving them to disk might have a non-trivial Reading PNG files and assembling new images and saving them to disk might have a non-trivial

View File

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

View File

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

View File

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

View File

@ -0,0 +1,24 @@
---
title: Testing Your Stylesheets
layout: tutorial
crumb: Testing
classnames:
- tutorial
---
# Test Unit
require 'compass/test_case'
class StylesheetsTest < Compass::TestCase
def test_stylesheets
my_sass_files.each do |sass_file|
assert_compiles(sass_file) do |result|
assert_not_blank result
end
end
end
protected
def my_sass_files
Dir.glob(File.expand_path(File.join(File.dirname(__FILE__), "../..", "app/stylesheets/**/[^_]*.sass")))
end
end

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 Developing a personal framework is simple. %li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
%li Compass mixins make CSS3 easy. %li Compass mixins make CSS3 easy.
%li Download and create extensions with ease. %li Download and create extensions with ease.
.sass .sass

View File

@ -30,6 +30,9 @@ body_id: install
%option{:value => "rails"} rails %option{:value => "rails"} rails
%option{:value => "other"} other %option{:value => "other"} other
project project
%span.creating
named
%input#project_name(placeholder="<myproject>")
with with
%select#framework %select#framework
%option{:value => "compass"} compass's %option{:value => "compass"} compass's
@ -48,14 +51,14 @@ body_id: install
%option{:value => "customized"} customize my project's %option{:value => "customized"} customize my project's
directory structure<span id="directories" style="display:none;"> directory structure<span id="directories" style="display:none;">
using using
%input#sassdir(value="sass") %input#sassdir(placeholder="sass")
for the sass source directory, for the sass source directory,
%input#cssdir(value="css") %input#cssdir(placeholder="css")
for the css output directory, for the css output directory,
%input#jsdir(value="javascripts") %input#jsdir(placeholder="javascripts")
for the javascripts directory, for the javascripts directory,
and and
%input#imagesdir(value="images") %input#imagesdir(placeholder="images")
for the images directory</span></span>. for the images directory</span></span>.
%h4 Thanks. Now run the following steps in your terminal: %h4 Thanks. Now run the following steps in your terminal:

View File

@ -0,0 +1,49 @@
---
title: "Compass/Rails Integration in v0.12"
description: "Starting in Compass v0.12 compass's rails integration is
done via a new project called compass-rails."
author: chris
---
The Compass v0.12 release is way behind schedule but it's finally getting
very close to release. The main goal of the v0.12 release has been to add
support for the rails asset pipeline and we hope that you'll agree that this
release achieves the very best integration with rails that compass has
ever provided.
In v0.12, we've create a new gem called `compass-rails` to provide full
support for rails 2.3 and greater. Let me tell you, this was no small
feat. 2.3 lacks Railtie support and 3.1 introduced the asset pipeline.
Backflips were performed; blood, sweat, and tears were shed; Monkeys
were patched and Ducks were punched.
The compass command line tool will now be aware of and compass
configuration settings you've made in your rails configuration files
and/or in the compass configuration file. You can use the approach that
best suites your workflow.
While the asset pipeline is convenient, large applications with lots of
stylesheets and many imports can become sluggish in development mode. To
make things snappier, you can now run the compass watcher in a separate
terminal to begin compilation as soon as you save. In combination with
tools like [live-reload](https://github.com/mockko/livereload), you may
not even need to reload your webpage to see the result in your browser.
Compass extensions and their starter files can be added to your rails
project following the extensions' existing installation instructions.
No special consideration is needed to support rails except to note
that the extension gem should be listed in the `:assets` group of your
Gemfile and you might need to use `bundle exec` to launch the compass
command line tool.
Having a dedicated gem for integration provides a number of benefits.
First, it means that we can release rails integration fixes on a
separate release schedule from the main compass library. Second, it
solves a chicken & egg problem we had where the command-line tools
didn't know whether they were dealing with a rails project until it was
too late. Finally, it allowed us to clean up some of the Compass
internals. To be clear, this gem doesn't mean that Rails support is
deprecated or a second class citizen in any way.
Huge thanks go to [Scott Davis](https://github.com/scottdavis) for his
hard work on the compass-rails gem.

View File

@ -0,0 +1,47 @@
---
title: "Compass v0.12 (Release Candidate) is Released"
description: "Compass 0.12: Flexible Sprites, Rails Integration"
author: chris
---
Compass 0.12 release candidate is out! Install it now:
$ (sudo) gem install compass --pre
This release is primarily to support the Rails Asset Pipeline which
required major changes to the Compass internals. If you use rails
with Compass please read the [blog post about the new compass-rails
gem][compass-rails].
In addition to the rails improvements this release contains many updates
to Compass Sprites:
* **Sprite Layouts**: `vertical` (default), `horizontal`, `diagonal`, and `smart`
layouts are now available. Different layouts may allow you to use
sprites more easily with differing design requirements. The `smart`
layout will efficiently pack sprites of different sizes -- resulting
in smaller file sizes. To select a layout set the
`$<spritename>-layout` variable to your desired layout name.
* **Sprite Load Path**: Sprite source files can now be stored in more locations than
just your images directory. To add sprite locations in your compass
configuration: `sprite_load_path << 'my/sprite/folder'
* **Sprite output location**: If you need to output sprites to a
location other than the images directory set `generated_images_dir`,
`generated_images_path`, `http_generated_images_dir`, and
`http_generated_images_path` in your compass configuration according
to your needs. You can refer to images in your generated images
directory using the `generated-image-url()` function.
Additionally there are many new CSS3 improvements, bug fixes, and other
small enhancements that you can read about in the
[CHANGELOG](/CHANGELOG/).
What's next for Compass? The Sass 3.2 release is coming soon and I'd
very much like the 0.13 release of compass to take advantage of the
great features that it offers. Additionally, we're working on an
extension registry where you can post your compass extensions and
discover new ones. Lastly, we'll be extracting blueprint to a
compass extension as that project seems to have stagnated. I'd say
we're getting pretty close to a 1.0 release!
[compass-rails]: /blog/2012/01/29/compass-and-rails-integration/

View File

@ -5,7 +5,6 @@ framework: compass
stylesheet: compass/css3/_box-shadow.scss stylesheet: compass/css3/_box-shadow.scss
meta_description: Specify the box shadow for all browsers. meta_description: Specify the box shadow for all browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core
@ -13,4 +12,4 @@ classnames:
--- ---
- render 'reference' do - render 'reference' do
%p %p
The box-shadow mixins are used to apply an inset or drop shadow to a block element. The box-shadow mixins are used to apply an inset or drop shadow to a block element.

View File

@ -5,7 +5,6 @@ framework: compass
stylesheet: compass/css3/_images.scss stylesheet: compass/css3/_images.scss
meta_description: Specify linear gradients and radial gradients for many browsers. meta_description: Specify linear gradients and radial gradients for many browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core

View File

@ -5,7 +5,6 @@ framework: compass
stylesheet: compass/css3/_pie.scss stylesheet: compass/css3/_pie.scss
meta_description: Compass integration with the css3pie tool. meta_description: Compass integration with the css3pie tool.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core
@ -76,4 +75,4 @@ classnames:
* CSS PIE is written by and copyright to: [Jason Johnston](http://twitter.com/lojjic) * CSS PIE is written by and copyright to: [Jason Johnston](http://twitter.com/lojjic)
* Compass is using css3pie version 1.0-beta3. It can be upgraded by downloading * Compass is using css3pie version 1.0-beta3. It can be upgraded by downloading
a new behavior file and replacing the one that comes with compass. a new behavior file and replacing the one that comes with compass.

View File

@ -4,7 +4,6 @@ crumb: Text Shadow
framework: compass framework: compass
stylesheet: compass/css3/_text-shadow.scss stylesheet: compass/css3/_text-shadow.scss
meta_description: Specify the text shadow for all browsers. meta_description: Specify the text shadow for all browsers.
beta: true
layout: core layout: core
classnames: classnames:
- reference - reference
@ -13,4 +12,4 @@ classnames:
--- ---
- render 'reference' do - render 'reference' do
%p %p
Provides a mixin for CSS text shadows. See <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">CSS3 spec: text-shadow</a>. Provides a mixin for CSS text shadows. See <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">CSS3 spec: text-shadow</a>.

View File

@ -5,7 +5,6 @@ framework: compass
stylesheet: compass/css3/_transform.scss stylesheet: compass/css3/_transform.scss
meta_description: Specify transformations for many browsers. meta_description: Specify transformations for many browsers.
layout: core layout: core
beta: true
classnames: classnames:
- reference - reference
- core - core

View File

@ -0,0 +1,15 @@
---
title: Compass User Interface
crumb: User Interface
framework: compass
stylesheet: compass/css3/_user-interface.scss
meta_description: Declare an element inline block for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
Provides mixins for the CSS3 User Interface module.

View File

@ -38,8 +38,9 @@ documented_functions:
sin(<span class="arg">$number</span>) sin(<span class="arg">$number</span>)
.details .details
%p %p
Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code> Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
then it will return a unitless result. Degrees will first be converted to radians. then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result, 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.
@ -49,8 +50,9 @@ documented_functions:
cos(<span class="arg">$number</span>) cos(<span class="arg">$number</span>)
.details .details
%p %p
Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code> Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
then it will return a unitless result. Degrees will first be converted to radians. then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result, 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.
@ -60,8 +62,9 @@ documented_functions:
tan(<span class="arg">$number</span>) tan(<span class="arg">$number</span>)
.details .details
%p %p
Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code> Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
then it will return a unitless result. Degrees will first be converted to radians. then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
will be evaluated as radians. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result, 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,6 +12,7 @@ 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
@ -31,7 +32,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 `url()` function instead of a <code>url()</code> function
#font-url.helper #font-url.helper
%h3 %h3
@ -42,7 +43,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 `url()` function instead of a <code>url()</code> function
#image-url.helper #image-url.helper
%h3 %h3
@ -53,9 +54,27 @@ 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 `url()` function instead of a <code>url()</code> 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 `false` no cache buster will be used. When a string, that When set to <code>false</code> no cache buster will be used. When a string, that
value will be used as the cache buster. 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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
# 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
@ -136,4 +137,17 @@ end
def long_compass_version 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

@ -86,7 +86,9 @@ module Sass
docstring.gsub(/@doc off(.*?)@doc on/m, '') docstring.gsub(/@doc off(.*?)@doc on/m, '')
end end
def docstring def docstring
value.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '') v = value
v = v.join("\n") if v.respond_to?(:join)
v.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '')
end end
def doc def doc
if value == "@doc off" if value == "@doc off"

View File

@ -9,8 +9,9 @@ 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 = 2 http.open_timeout = 10
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)
@ -25,7 +26,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 = "http://github.com/#{user}/#{project}/zipball/#{branch}" download_link = "https://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('chriseppstein', 'compass-960-plugin', 'ninesixty') install_from_github('nextmat', 'compass-960-plugin', 'ninesixty')

View File

@ -77,16 +77,6 @@ Feature: Command Line
Then an error message is printed out: A bare project cannot be created when a framework is specified. Then an error message is printed out: A bare project cannot be created when a framework is specified.
And the command exits with a non-zero error code And the command exits with a non-zero error code
Scenario: Initializing a rails project
Given ruby supports fork
Given I'm in a newly created rails project: my_rails_project
When I initialize a project using: compass init rails --sass-dir app/stylesheets --css-dir public/stylesheets/compiled
Then a config file config/compass.rb is reported created
Then a config file config/compass.rb is created
And a sass file app/stylesheets/screen.scss is created
And a sass file app/stylesheets/print.scss is created
And a sass file app/stylesheets/ie.scss is created
Scenario: Compiling an existing project. Scenario: Compiling an existing project.
Given I am using the existing project in test/fixtures/stylesheets/compass Given I am using the existing project in test/fixtures/stylesheets/compass
When I run: compass compile When I run: compass compile
@ -200,7 +190,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-s03c3b29b35.png | | images/flag-s4798b5a210.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 +198,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-s03c3b29b35.png | | images/flag-s4798b5a210.png |
Scenario: Watching a project for changes Scenario: Watching a project for changes
Given ruby supports fork Given ruby supports fork

View File

@ -12,20 +12,11 @@ Feature: Extensions
When I run: compass frameworks When I run: compass frameworks
Then the list of frameworks includes "testing" Then the list of frameworks includes "testing"
@listframeworks
Scenario: Extensions directory for rails projects
Given ruby supports fork
And I'm in a newly created rails project: my_rails_project
And the "my_rails_project/vendor/plugins/compass/extensions" directory exists
And and I have a fake extension at my_rails_project/vendor/plugins/compass/extensions/testing
When I run: compass frameworks
Then the list of frameworks includes "testing"
@listframeworks @listframeworks
Scenario: Shared extensions directory Scenario: Shared extensions directory
Given I am using the existing project in test/fixtures/stylesheets/compass Given the "~/.compass/extensions" directory exists
And the "~/.compass/extensions" directory exists
And and I have a fake extension at ~/.compass/extensions/testing And and I have a fake extension at ~/.compass/extensions/testing
And I am using the existing project in test/fixtures/stylesheets/compass
When I run: compass frameworks When I run: compass frameworks
Then the list of frameworks includes "testing" Then the list of frameworks includes "testing"

View File

@ -1,32 +0,0 @@
Feature: Rails Integration
In order to provide an integrated experience
As a Ruby on Rails user
I want to easily access the Compass functionality
Scenario: Configure Compass from my Application
Given I'm in a rails3.1 application named 'exemplar'
When I edit 'config/application.rb' and save it with the following value:
"""
require File.expand_path('../boot', __FILE__)
require 'rails/all'
Bundler.require(:default, Rails.env) if defined?(Bundler)
module Exemplar
class Application < Rails::Application
config.encoding = "utf-8"
config.filter_parameters += [:password]
config.compass.fonts_dir = "app/assets/fonts"
end
end
"""
And I run: compass config -p fonts_dir
Then the command should print out "app/assets/fonts"
Scenario: Rails gets access to the compass config file
Given I'm in a rails3.1 application named 'exemplar'
When I edit 'config/compass.rb' and save it with the following value:
"""
fonts_dir = "app/assets/fonts"
"""
And I run: ruby -I. -rconfig/environment -e 'puts Compass.configuration.fonts_dir'
Then the command should print out "app/assets/fonts"

View File

@ -6,7 +6,6 @@ require 'compass/exec'
include Compass::TestCaseHelper include Compass::TestCaseHelper
include Compass::CommandLineHelper include Compass::CommandLineHelper
include Compass::IoHelper include Compass::IoHelper
include Compass::RailsHelper
Before do Before do
Compass.reset_configuration! Compass.reset_configuration!
@ -41,16 +40,6 @@ Given %r{^I am in the parent directory$} do
Dir.chdir ".." Dir.chdir ".."
end end
Given %r{^I'm in a newly created rails project: (.+)$} do |project_name|
@cleanup_directories << project_name
begin
generate_rails_app project_name
Dir.chdir project_name
rescue LoadError
pending "Missing Ruby-on-rails gems: sudo gem install rails"
end
end
Given /^I should clean up the directory: (\w+)$/ do |directory| Given /^I should clean up the directory: (\w+)$/ do |directory|
@cleanup_directories << directory @cleanup_directories << directory
end end
@ -135,13 +124,14 @@ 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|
Then %Q{a css file #{css_file.first} is reported removed} #need to find a better way but this works for now
step %Q{a css file #{css_file.first} is reported removed}
end end
end end
Then "the following files are removed:" do |table| Then "the following files are removed:" do |table|
table.rows.each do |css_file| table.rows.each do |css_file|
Then %Q{a css file #{css_file.first} is removed} step %Q{a css file #{css_file.first} is removed}
end end
end end
@ -257,7 +247,7 @@ end
Then /^I should see the following "([^"]+)" commands:$/ do |kind, table| Then /^I should see the following "([^"]+)" commands:$/ do |kind, table|
Then %Q{I should be shown a list of "#{kind}" commands} step %Q{I should be shown a list of "#{kind}" commands}
commands = @last_command_list.map{|c| c =~ /^\s+\* ([^ ]+)\s+- [A-Z].+$/; [$1]} commands = @last_command_list.map{|c| c =~ /^\s+\* ([^ ]+)\s+- [A-Z].+$/; [$1]}
table.diff!(commands) table.diff!(commands)

View File

@ -1,8 +1,10 @@
Given /^the "([^\"]*)" directory exists$/ do |directory| Given /^the "([^\"]*)" directory exists$/ do |directory|
directory.gsub!('~', ENV["HOME"]) if directory.include?('~/')
FileUtils.mkdir_p directory FileUtils.mkdir_p directory
end end
Given /^and I have a fake extension at (.*)$/ do |directory| Given /^and I have a fake extension at (.*)$/ do |directory|
directory.gsub!('~', ENV["HOME"]) if directory.include?('~/')
FileUtils.mkdir_p File.join(directory, 'stylesheets') FileUtils.mkdir_p File.join(directory, 'stylesheets')
FileUtils.mkdir_p File.join(directory, 'templates/project') FileUtils.mkdir_p File.join(directory, 'templates/project')
open(File.join(directory, 'templates/project/manifest.rb'),"w") do |f| open(File.join(directory, 'templates/project/manifest.rb'),"w") do |f|

View File

@ -27,7 +27,7 @@ $experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties (-ms). // Support for microsoft in experimental css3 properties (-ms).
$experimental-support-for-microsoft : true !default; $experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties (-khtml). // Support for khtml in experimental css3 properties (-khtml).
$experimental-support-for-khtml : true !default; $experimental-support-for-khtml : false !default;
// Support for svg in experimental css3 properties. // Support for svg in experimental css3 properties.
// Setting this to true might add significant size to your // Setting this to true might add significant size to your
// generated stylesheets. // generated stylesheets.

View File

@ -17,6 +17,7 @@ $default-border-radius: 5px !default;
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)} // .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
// //
// Which generates: // Which generates:
//
// .simple { // .simple {
// -webkit-border-radius: 4px 4px; // -webkit-border-radius: 4px 4px;
// -moz-border-radius: 4px / 4px; // -moz-border-radius: 4px / 4px;

View File

@ -40,30 +40,13 @@ $default-box-shadow-inset : false !default;
$shadow-9 : false, $shadow-9 : false,
$shadow-10: false $shadow-10: false
) { ) {
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26 @if $shadow-1 == default {
$legacy: (type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6)); $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
@if $legacy {
@warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " +
"Pass the values as a single space-separated list, or use the single-box-shadow mixin. " +
"See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
@include single-box-shadow(
if($shadow-1, $shadow-1, $default-box-shadow-color),
if($shadow-2, $shadow-2, $default-box-shadow-h-offset),
if($shadow-3, $shadow-3, $default-box-shadow-v-offset),
if($shadow-4, $shadow-4, $default-box-shadow-blur),
if($shadow-5, $shadow-5, $default-box-shadow-spread),
if($shadow-6, $shadow-6, $default-box-shadow-inset)
);
}
@else {
@if $shadow-1 == default {
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
}
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
@include experimental(box-shadow, $shadow,
-moz, -webkit, -o, not -ms, not -khtml, official
);
} }
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
@include experimental(box-shadow, $shadow,
-moz, -webkit, not -o, not -ms, not -khtml, official
);
} }
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. // Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
@ -90,4 +73,4 @@ $default-box-shadow-inset : false !default;
@if $inset { $full: inset $full; } @if $inset { $full: inset $full; }
@include box-shadow($full); @include box-shadow($full);
} }
} }

View File

@ -8,6 +8,6 @@
@mixin box-sizing($bs) { @mixin box-sizing($bs) {
$bs: unquote($bs); $bs: unquote($bs);
@include experimental(box-sizing, $bs, @include experimental(box-sizing, $bs,
-moz, -webkit, not -o, -ms, not -khtml, official -moz, -webkit, not -o, not -ms, not -khtml, official
); );
} }

View File

@ -6,6 +6,8 @@
// * $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
@ -13,13 +15,20 @@
// 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
// @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot") // e.g. "font-style: italic;", you may add a couple of @font-face includes
// containing the respective font files for each style and specying
// respective the $style parameter.
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face( @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 {
@ -28,6 +37,12 @@
src: font-url($eot); src: font-url($eot);
$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;
}
} }
} }

View File

@ -12,11 +12,11 @@
$khtml : $experimental-support-for-khtml, $khtml : $experimental-support-for-khtml,
$official : true $official : true
) { ) {
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
@if $official { #{$property} : $value; } @if $official { #{$property} : $value; }
} }
@ -29,10 +29,10 @@
$khtml : $experimental-support-for-khtml, $khtml : $experimental-support-for-khtml,
$official : true $official : true
) { ) {
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
@if $official { #{$property} : #{$value}; } @if $official { #{$property} : #{$value}; }
} }

View File

@ -23,26 +23,12 @@ $default-text-shadow-blur: 1px !default;
$shadow-9 : false, $shadow-9 : false,
$shadow-10: false $shadow-10: false
) { ) {
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26 @if $shadow-1 == default {
$legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and ($shadow-2 or $shadow-3 or $shadow-4) and not($shadow-5 or $shadow-6 or $shadow-7 or $shadow-8 or $shadow-9 or $shadow-10); $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
@if $legacy {
@warn "Passing separate arguments for a single shadow to text-shadow is deprecated. " +
"Pass the values as a single space-separated list, or use the single-text-shadow mixin. " +
"See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
@include single-text-shadow(
$shadow-1,
if($shadow-2, $shadow-2, $default-text-shadow-h-offset),
if($shadow-3, $shadow-3, $default-text-shadow-v-offset),
if($shadow-4, $shadow-4, $default-text-shadow-blur)
);
} @else {
@if $shadow-1 == default {
$shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
}
text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
$shadow-4, $shadow-5, $shadow-6,
$shadow-7, $shadow-8, $shadow-9, $shadow-10);
} }
text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
$shadow-4, $shadow-5, $shadow-6,
$shadow-7, $shadow-8, $shadow-9, $shadow-10);
} }
// Provides a single cross-browser CSS text shadow. // Provides a single cross-browser CSS text shadow.
@ -57,6 +43,6 @@ $default-text-shadow-blur: 1px !default;
@if $color == none { @if $color == none {
text-shadow: none; text-shadow: none;
} @else { } @else {
text-shadow: $color $hoff $voff $blur; text-shadow: $color $hoff $voff $blur;
} }
} }

View File

@ -2,14 +2,14 @@
// @doc off // @doc off
// Note ---------------------------------------------------------------------- // Note ----------------------------------------------------------------------
// Safari is the only browser that currently supports 3D transforms. // Safari, Chrome, and Firefox all support 3D transforms. However,
// Because of that it can be important to control whether a given 2D transform // only in the most recent builds. You should also provide fallback 2d support for
// uses the full range of experimental browser prefixes, or only the 3D list. // Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d) // To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
// to switch between the two support lists. The toggle defaults to 'false' (2D), // to switch between the two support lists. The toggle defaults to 'false' (2D),
// and also accepts 'true' (3D). Currently the lists are as follows: // and also accepts 'true' (3D). Currently the lists are as follows:
// 2D: Mozilla, Webkit, Opera, Official // 2D: Mozilla, Webkit, Opera, Official
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)** // 3D: Webkit, Firefox.
// Available Transforms ------------------------------------------------------ // Available Transforms ------------------------------------------------------
// - Scale (2d and 3d) // - Scale (2d and 3d)

View File

@ -23,15 +23,16 @@ $default-transition-function: false !default;
$default-transition-delay: false !default; $default-transition-delay: false !default;
$transitionable-prefixed-values: transform, transform-origin !default;
// One or more properties to transition // One or more properties to transition
// //
// * for multiple, use a comma-delimited list // * for multiple, use a comma-delimited list
// * also accepts "all" or "none" // * also accepts "all" or "none"
@mixin transition-property($properties: $default-transition-property) { @mixin transition-property($properties: $default-transition-property) {
@include experimental(transition-property, unquote($properties), @if type-of($properties) == string { $properties: unquote($properties); }
-moz, -webkit, -o, not -ms, not -khtml, official @include build-prefix-values(transition-property, $properties);
);
} }
// One or more durations in seconds // One or more durations in seconds
@ -42,7 +43,7 @@ $default-transition-delay: false !default;
@mixin transition-duration($duration: $default-transition-duration) { @mixin transition-duration($duration: $default-transition-duration) {
@if type-of($duration) == string { $duration: unquote($duration); } @if type-of($duration) == string { $duration: unquote($duration); }
@include experimental(transition-duration, $duration, @include experimental(transition-duration, $duration,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
@ -54,7 +55,7 @@ $default-transition-delay: false !default;
@mixin transition-timing-function($function: $default-transition-function) { @mixin transition-timing-function($function: $default-transition-function) {
@include experimental(transition-timing-function, unquote($function), @include experimental(transition-timing-function, unquote($function),
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
@ -66,22 +67,19 @@ $default-transition-delay: false !default;
@mixin transition-delay($delay: $default-transition-delay) { @mixin transition-delay($delay: $default-transition-delay) {
@if type-of($delay) == string { $delay: unquote($delay); } @if type-of($delay) == string { $delay: unquote($delay); }
@include experimental(transition-delay, $delay, @include experimental(transition-delay, $delay,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
// Transition all-in-one shorthand // Transition all-in-one shorthand
@mixin single-transition( @mixin single-transition(
$properties: $default-transition-property, $property: $default-transition-property,
$duration: $default-transition-duration, $duration: $default-transition-duration,
$function: $default-transition-function, $function: $default-transition-function,
$delay: $default-transition-delay $delay: $default-transition-delay
) { ) {
@include transition-property($properties); @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
@include transition-duration($duration);
@if $function { @include transition-timing-function($function); }
@if $delay { @include transition-delay($delay); }
} }
@mixin transition( @mixin transition(
@ -96,24 +94,61 @@ $default-transition-delay: false !default;
$transition-9 : false, $transition-9 : false,
$transition-10: false $transition-10: false
) { ) {
$legacy: (type-of($transition-1) == string and type-of(if($transition-2, $transition-2, 0)) == number and type-of(if($transition-3, $transition-3, '')) == string and type-of(if($transition-4, $transition-4, 0)) == number and ($transition-2 or $transition-3 or $transition-4)); @if $transition-1 == default {
@if $legacy { $transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
@warn "Passing separate arguments for a single transition to transition is deprecated. " +
"Pass the values as a single space-separated list, or use the single-transition mixin.";
@include single-transition(
if($transition-1, $transition-1, $default-transition-property),
if($transition-2, $transition-2, $default-transition-duration),
if($transition-3, $transition-3, $default-transition-function),
if($transition-4, $transition-4, $default-transition-delay)
);
}
@else {
@if $transition-1 == default {
$transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
}
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
@include experimental(transition, $transition,
-moz, -webkit, -o, not -ms, not -khtml, official
);
} }
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
@include build-prefix-values(transition, $transition);
}
@mixin build-prefix-values($property, $values, $delay: false) {
$raw-values: ($values);
$index: compact(false);
$webkit-value: compact(false);
$moz-value: compact(false);
$ms-value: compact(false);
$o-value: compact(false);
@each $value in $raw-values {
$value: compact(join($value, false));
$match: false;
@each $prefixed-value in $transitionable-prefixed-values {
@if index($value, $prefixed-value) {
$index: index($value, $prefixed-value);
$match: true;
}
}
@if $match {
$value-prefix: nth($value, $index);
$value-suffix: compact(false);
@for $i from 2 through length($value) {
$value-suffix: append($value-suffix, nth($value, $i), space);
}
$non-webkit-suffix: compact(append($value-suffix, $delay, space));
$webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
$moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
$ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
$o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
} @else {
$non-webkit-value: compact(append($value, $delay, space));
$webkit-value: append($webkit-value, $value, comma);
$moz-value: append($moz-value, $non-webkit-value, comma);
$ms-value: append($ms-value, $non-webkit-value, comma);
$o-value: append($o-value, $non-webkit-value, comma);
}
}
@if $experimental-support-for-webkit { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
@if $experimental-support-for-mozilla { -moz-#{$property} : $moz-value; }
@if $experimental-support-for-microsoft { -ms-#{$property} : $ms-value; }
@if $experimental-support-for-opera { -o-#{$property} : $o-value; }
#{$property} : compact($values $delay);
} }

View File

@ -1,19 +1,17 @@
@import "shared";
// User Interface ------------------------------------------------------------ // User Interface ------------------------------------------------------------
// This file can be expanded to handle all the user interface properties as // This file can be expanded to handle all the user interface properties as
// they become available in browsers: // they become available in browsers:
// http://www.w3.org/TR/2000/WD-css3-userint-20000216 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
@import "shared";
// User Select ---------------------------------------------------------------
// This property controls the selection model and granularity of an element. // This property controls the selection model and granularity of an element.
// //
// @param $select // @param $select
// [ none | text | toggle | element | elements | all | inherit ] // [ none | text | toggle | element | elements | all | inherit ]
@mixin user-select($select) { @mixin user-select($select) {
$select: unquote($select); $select: unquote($select);
@include experimental(user-select, $select, @include experimental(user-select, $select,
-moz, -webkit, not -o, not -ms, -khtml, official -moz, -webkit, not -o, not -ms, -khtml, official
); );
} }

View File

@ -15,9 +15,14 @@ $ie-font-ratio: 16px / 100%;
// Set to false if you want to use absolute pixes in sizing your typography. // Set to false if you want to use absolute pixes in sizing your typography.
$relative-font-sizing: true !default; $relative-font-sizing: true !default;
// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
// to round the line height to the nearest half line height instead of the
// nearest integral line height to avoid large spacing between lines.
$round-to-nearest-half-line: false !default;
// Ensure there is at least this many pixels // Ensure there is at least this many pixels
// of vertical padding above and below the text. // of vertical padding above and below the text.
$min-line-padding: 2px; $min-line-padding: 2px !default;
// $base-font-size but in your output unit of choice. // $base-font-size but in your output unit of choice.
// Defaults to 1em when `$relative-font-sizing` // Defaults to 1em when `$relative-font-sizing`
@ -59,6 +64,11 @@ $base-half-leader: $base-leader / 2;
} }
} }
// resets the baseline to 1 leading unit
@mixin reset-baseline {
@include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
}
// Show a background image that can be used to debug your alignments. // Show a background image that can be used to debug your alignments.
// include the $img argument if you would rather use your own image than the // include the $img argument if you would rather use your own image than the
// Compass default gradient image. // Compass default gradient image.
@ -103,9 +113,11 @@ $base-half-leader: $base-leader / 2;
} }
@function lines-for-font-size($font-size) { @function lines-for-font-size($font-size) {
$lines: ceil($font-size / $base-line-height); $lines: if($round-to-nearest-half-line,
ceil(2 * $font-size / $base-line-height) / 2,
ceil($font-size / $base-line-height));
@if $lines * $base-line-height - $font-size < $min-line-padding * 2 { @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
$lines: $lines + 1; $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
} }
@return $lines; @return $lines;
} }

View File

@ -26,9 +26,17 @@
// Hides text in an element so you can see the background. // Hides text in an element so you can see the background.
@mixin hide-text { @mixin hide-text {
$approximate_em_value: 12px / 1em; // slightly wider than the box prevents issues with inline-block elements
$wider_than_any_screen: -9999em; text-indent: 110%;
text-indent: $wider_than_any_screen * $approximate_em_value; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-align: left; }
// Hides text in an element by squishing the text into oblivion.
// Use this if you need to hide text contained in an inline element
// but still have it read by a screen reader.
@mixin squish-text {
font: 0/0 serif;
text-shadow: none;
color: transparent;
} }

View File

@ -1 +1,2 @@
@import "sprites/base";
@import "sprites/sprite-img"; @import "sprites/sprite-img";

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); @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
} }
} }
// 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) { @mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
@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}"); @include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y);
} }
} }
} }
@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default;
// If a base class is provided, then each class will extend it. // If 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)) { @mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {
@each $sprite-name in $sprite-names { @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); @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
} }
} }
} }

View File

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

View File

@ -3,11 +3,13 @@
background-color: $header-color; background-color: $header-color;
&.even, &:nth-child(2n) { &.even, &:nth-child(2n) {
background-color: $header-color - $dark-intersection; } } background-color: $header-color - $dark-intersection; } }
tr.odd { tr {
td { &.odd, &:nth-child(2n+1) {
background-color: $odd-row-color; td {
&.even, &:nth-child(2n) { background-color: $odd-row-color;
background-color: $odd-row-color - $dark-intersection; } } } &.even, &:nth-child(2n) {
background-color: $odd-row-color - $dark-intersection; } } }
}
tr.even { tr.even {
td { td {
background-color: $even-row-color; background-color: $even-row-color;

View File

@ -17,7 +17,7 @@ module Compass
def shared_extension_paths def shared_extension_paths
@shared_extension_paths ||= begin @shared_extension_paths ||= begin
if ENV["HOME"] && File.directory?(ENV["HOME"]) if ENV["HOME"] && File.directory?(ENV["HOME"])
[File.expand_path("~/.compass/extensions")] [File.join(ENV["HOME"], ".compass", "extensions")]
else else
[] []
end end
@ -30,3 +30,6 @@ end
%w(configuration frameworks app_integration actions compiler).each do |lib| %w(configuration frameworks app_integration actions compiler).each do |lib|
require "compass/#{lib}" require "compass/#{lib}"
end end
# for rails upgrade warnings in 0.12
require 'compass/app_integration/rails'

View File

@ -65,6 +65,7 @@ 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
@ -106,6 +107,5 @@ module Compass
logger.record(action, file, options[:extra].to_s) logger.record(action, file, options[:extra].to_s)
end end
end end
end end
end end

View File

@ -1,24 +1,39 @@
%w(stand_alone rails merb).each do |lib| require "compass/app_integration/stand_alone"
require "compass/app_integration/#{lib}"
end
module Compass module Compass
module AppIntegration module AppIntegration
module Helpers module Helpers
def lookup(project_type) #attr_accessor :project_types
eval "Compass::AppIntegration::#{camelize(project_type)}" DEAFULT_PROJECT_TYPES = {
rescue NameError :stand_alone => "Compass::AppIntegration::StandAlone"
raise Compass::Error, "No application integration exists for #{project_type}" }
def init
@project_types ||= DEAFULT_PROJECT_TYPES.dup
end end
protected def project_types
@project_types
end
# Stolen from ActiveSupport def default?
def camelize(s) @project_types.keys === DEAFULT_PROJECT_TYPES.keys
s.to_s.gsub(/\/(.?)/) { "::#{$1.upcase}" }.gsub(/(?:^|_)(.)/) { $1.upcase } end
def lookup(type)
unless @project_types[type].nil?
eval @project_types[type]
else
raise Compass::Error, "No application integration exists for #{type}"
end
end
def register(type, klass)
@project_types[type] = klass
end end
end end
extend Helpers extend Helpers
init
end end
end end

View File

@ -1 +0,0 @@
require 'compass/app_integration/merb/runtime' if defined?(Merb::Plugins)

View File

@ -1,63 +0,0 @@
# To configure Merb to use compass do the following:
#
# Add dependencies to config/dependencies.rb
#
# dependency "haml", ">=2.2.0"
# dependency "merb-haml", merb_gems_version
# dependency "chriseppstein-compass", :require_as => 'compass'
#
#
# To use a different sass stylesheets locations as is recommended by compass
# add this configuration to your configuration block:
#
# Merb::BootLoader.before_app_loads do
# Merb::Plugins.config[:compass] = {
# :stylesheets => "app/stylesheets",
# :compiled_stylesheets => "public/stylesheets/compiled"
# }
# end
#
module Compass
def self.setup_template_location
# default the compass configuration if they didn't set it up yet.
Merb::Plugins.config[:compass] ||= {}
# default sass stylesheet location unless configured to something else
Merb::Plugins.config[:compass][:stylesheets] ||= Merb.dir_for(:stylesheet) / "sass"
# default sass css location unless configured to something else
Merb::Plugins.config[:compass][:compiled_stylesheets] ||= Merb.dir_for(:stylesheet)
#define the template hash for the project stylesheets as well as the framework stylesheets.
template_location = {
Merb::Plugins.config[:compass][:stylesheets] => Merb::Plugins.config[:compass][:compiled_stylesheets]
}
Compass::Frameworks::ALL.each do |framework|
template_location[framework.stylesheets_directory] = Merb::Plugins.config[:compass][:compiled_stylesheets]
end
# merge existing template locations if present
if Merb::Plugins.config[:sass][:template_location].is_a?(Hash)
template_location.merge!(Merb::Plugins.config[:sass][:template_location])
Merb::Plugins.config[:sass][:template_location] = template_location
end
#configure Sass to know about all these sass locations.
Sass::Plugin.options[:template_location] = template_location
end
end
Merb::BootLoader.after_app_loads do
#set up sass if haml load didn't do it -- this happens when using a non-default stylesheet location.
unless defined?(Sass::Plugin)
require "sass/plugin"
if Merb::Plugins.config[:sass]
Sass::Plugin.options = Merb::Plugins.config[:sass]
# support old (deprecatd Merb::Config[:sass] option)
elsif Merb::Config[:sass]
Sass::Plugin.options = Merb::Config[:sass]
end
end
Compass.setup_template_location
end

View File

@ -1,66 +1,18 @@
%w(configuration_defaults installer).each do |lib|
require "compass/app_integration/rails/#{lib}"
end
require 'compass/app_integration/rails/runtime' if defined?(ActionController::Base)
module Compass module Compass
module AppIntegration module AppIntegration
module Rails module Rails
extend self extend self
def initialize!
def booted! Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.initialize! from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
Compass::AppIntegration::Rails.const_set(:BOOTED, true)
end end
def booted?
defined?(Compass::AppIntegration::Rails::BOOTED) && Compass::AppIntegration::Rails::BOOTED
end
def installer(*args)
Installer.new(*args)
end
def configuration
Compass::Configuration::Data.new('rails').
extend(ConfigurationDefaults)
end
def env
env_production? ? :production : :development
end
def env_production?
if defined?(::Rails) && ::Rails.respond_to?(:env)
::Rails.env.production?
elsif defined?(RAILS_ENV)
RAILS_ENV == "production"
end
end
def root def root
if defined?(::Rails) && ::Rails.respond_to?(:root) Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.root from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
::Rails.root ::Rails.root
elsif defined?(RAILS_ROOT)
RAILS_ROOT
end
end end
def env
def initialize!(config = nil) Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.env from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
if booted? ::Rails.env
Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your intializer.")
else
booted!
end
config ||= Compass.detect_configuration_file(root)
Compass.add_project_configuration(config, :project_type => :rails)
Compass.discover_extensions!
Compass.configure_sass_plugin!
Compass.handle_configuration_change!
end end
end end
end end
end end

View File

@ -1,15 +0,0 @@
# :stopdoc:
module ActionController
class Base
def process_with_compass(*args)
Sass::Plugin.rails_controller = self
begin
process_without_compass(*args)
ensure
Sass::Plugin.rails_controller = nil
end
end
alias_method_chain :process, :compass
end
end
# :startdoc:

View File

@ -1,5 +0,0 @@
module Sass::Plugin
class << self
attr_accessor :rails_controller
end
end

View File

@ -1,18 +0,0 @@
module Compass::SassExtensions::Functions::Urls
def image_url_with_rails_integration(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
if (@controller = Sass::Plugin.rails_controller) && @controller.respond_to?(:request) && @controller.request
begin
if only_path.to_bool
Sass::Script::String.new image_path(path.value)
else
Sass::Script::String.new "url(#{image_path(path.value)})"
end
ensure
@controller = nil
end
else
image_url_without_rails_integration(path, only_path, cache_buster)
end
end
alias_method_chain :image_url, :rails_integration
end

View File

@ -1,46 +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("project")
end
data.project_type = :rails # Forcing this makes sure all the rails defaults will be loaded.
data
end
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.initialize!(app.config.compass)
end
end
end

View File

@ -1,77 +0,0 @@
module Compass
module AppIntegration
module Rails
module ConfigurationDefaults
def project_type_without_default
:rails
end
def default_sass_dir
if Sass::Util.ap_geq?('3.1.0.beta')
File.join("app", "assets", "stylesheets")
else
File.join("app", "stylesheets")
end
end
def default_css_dir
File.join("public", "stylesheets")
end
def default_images_dir
File.join("public", "images")
end
def default_fonts_dir
File.join("public", "fonts")
end
def default_javascripts_dir
if Sass::Util.ap_geq?('3.1.0.beta')
File.join("app", "assets", "javascripts")
else
File.join("public", "javascripts")
end
end
def default_http_images_path
"#{top_level.http_path}images"
end
def default_http_javascripts_path
"#{top_level.http_path}javascripts"
end
def default_http_fonts_path
"#{top_level.http_path}fonts"
end
def default_http_stylesheets_path
"#{top_level.http_path}stylesheets"
end
def default_extensions_dir
File.join("vendor", "plugins", "compass_extensions")
end
def default_cache_dir
File.join("tmp", "sass-cache")
end
def default_project_path
project_path = Compass::AppIntegration::Rails.root
end
def default_http_path
"/" # XXX Where is/was this stored in the Rails config?
end
def default_environment
Compass::AppIntegration::Rails.env
end
end
end
end
end

View File

@ -1,182 +0,0 @@
module Compass
module Installers
class Base
end
class ManifestInstaller < Base
end
end
module AppIntegration
module Rails
class Installer < Compass::Installers::ManifestInstaller
def completed_configuration
config = {}
config[:sass_dir] = prompt_sass_dir unless sass_dir_without_default
config[:css_dir] = prompt_css_dir unless css_dir_without_default
config unless config.empty?
end
def write_configuration_files(config_file = nil)
config_file ||= targetize('config/compass.rb')
unless File.exists?(config_file)
directory File.dirname(config_file)
write_file config_file, config_contents
end
unless rails3?
directory File.dirname(targetize('config/initializers/compass.rb'))
write_file targetize('config/initializers/compass.rb'), initializer_contents
end
end
def rails3?
File.exists?(targetize('config/application.rb'))
end
def prepare
write_configuration_files
end
def gem_config_instructions
if rails3?
%Q{Add the following to your Gemfile:\n\n gem "compass", ">= #{Compass::VERSION}"}
else
%Q{Add the following to your environment.rb:\n\n config.gem "compass", :version => ">= #{Compass::VERSION}"}
end
end
def finalize(options = {})
if options[:create]
puts <<-NEXTSTEPS
Congratulations! Your rails project has been configured to use Compass.
Just a couple more things left to do.
#{gem_config_instructions}
Then, make sure you restart your server.
Sass will automatically compile your stylesheets during the next
page request and keep them up to date when they change.
NEXTSTEPS
end
unless options[:prepare]
if manifest.has_stylesheet?
puts "\nNow add these lines to the head of your layout(s):\n\n"
puts stylesheet_links
end
end
end
def hamlize?
# XXX Is there a better way to detect haml in a particular rails project?
require 'haml'
true
rescue LoadError
false
end
def install_location_for_html(to, options)
separate("public/#{pattern_name_as_dir}#{to}")
end
def prompt_sass_dir
if rails3?
nil
else
recommended_location = separate('app/stylesheets')
default_location = separate('public/stylesheets/sass')
print %Q{Compass recommends that you keep your stylesheets in #{recommended_location}
instead of the Sass default location of #{default_location}.
Is this OK? (Y/n) }
answer = $stdin.gets.downcase[0]
answer == ?n ? default_location : recommended_location
end
end
def prompt_css_dir
if rails3?
nil
else
recommended_location = separate("public/stylesheets/compiled")
default_location = separate("public/stylesheets")
puts
print %Q{Compass recommends that you keep your compiled css in #{recommended_location}/
instead the Sass default of #{default_location}/.
However, if you're exclusively using Sass, then #{default_location}/ is recommended.
Emit compiled stylesheets to #{recommended_location}/? (Y/n) }
answer = $stdin.gets
answer = answer.downcase[0]
answer == ?n ? default_location : recommended_location
end
end
def config_contents
project_path, Compass.configuration.project_path = Compass.configuration.project_path, nil
("# This configuration file works with both the Compass command line tool and within Rails.\n" +
Compass.configuration.serialize)
ensure
Compass.configuration.project_path = project_path
end
def initializer_contents
%Q{require 'compass'
|require 'compass/app_integration/rails'
|Compass::AppIntegration::Rails.initialize!
|}.gsub(/^\s+\|/,'')
end
def stylesheet_prefix
if css_dir.length >= 19
"#{css_dir[19..-1]}/"
else
nil
end
end
def stylesheet_links
if hamlize?
haml_stylesheet_links
else
html_stylesheet_links
end
end
def haml_stylesheet_links
html = "%head\n"
manifest.each_stylesheet do |stylesheet|
# Skip partials.
next if File.basename(stylesheet.from)[0..0] == "_"
ss_line = " = stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.s[ac]ss$/,'.css')}'"
if stylesheet.options[:media]
ss_line += ", :media => '#{stylesheet.options[:media]}'"
end
if stylesheet.options[:condition]
ss_line = " /[if #{stylesheet.options[:condition]}]\n " + ss_line
end
html << ss_line + "\n"
end
html
end
def html_stylesheet_links
html = "<head>\n"
manifest.each_stylesheet do |stylesheet|
# Skip partials.
next if File.basename(stylesheet.from)[0..0] == "_"
ss_line = "<%= stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.s[ac]ss$/,'.css')}'"
if stylesheet.options[:media]
ss_line += ", :media => '#{stylesheet.options[:media]}'"
end
ss_line += " %>"
if stylesheet.options[:condition]
ss_line = "<!--[if #{stylesheet.options[:condition]}]>" + ss_line + "<![endif]-->"
end
html << " #{ss_line}\n"
end
html << "</head>"
html
end
end
end
end
end

View File

@ -1,27 +0,0 @@
unless defined?(Compass::RAILS_LOADED)
Compass::RAILS_LOADED = true
begin
require 'action_pack/version'
if ActionPack::VERSION::MAJOR >= 3
# TODO figure something out so image_path works with rails integration
%w(railtie).each do |lib|
require "compass/app_integration/rails/actionpack3/#{lib}"
end
else
%w(action_controller sass_plugin urls).each do |lib|
require "compass/app_integration/rails/actionpack2/#{lib}"
end
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."
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

View File

@ -1,78 +0,0 @@
# =================================================================
# Compass Ruby on Rails Installer (template) v.1.0
# written by Derek Perez (derek@derekperez.com)
# -----------------------------------------------------------------
# NOTE: This installer is designed to work as a Rails template,
# and can only be used with Rails 2.3+.
# -----------------------------------------------------------------
# Copyright (c) 2009 Derek Perez
#
# Permission is hereby granted, free of charge, to any person
# obtaining a copy of this software and associated documentation
# files (the "Software"), to deal in the Software without
# restriction, including without limitation the rights to use,
# copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the
# Software is furnished to do so, subject to the following
# conditions:
#
# The above copyright notice and this permission notice shall be
# included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
# OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
# HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
# OTHER DEALINGS IN THE SOFTWARE.
# =================================================================
# Determine if we use sudo, defaults to true unless we are
# on win32, cygwin, or mingw32 or they ask us not to
def sudo_is_an_option?
return false if RUBY_PLATFORM =~ /(win|w)32$/ # true if win32, cygwin or mingw32
return false if ENV['NO_SUDO'] =~ /true/i
return true
end
puts "==================================================="
puts "Welcome to the Compass Installer for Ruby on Rails!"
puts "==================================================="
puts
# css framework prompt
css_framework = ask("What CSS Framework install do you want to use with Compass?")
# sass storage prompt
sass_dir = ask("Where would you like to keep your sass files within your project? (default: 'app/stylesheets')")
sass_dir = "app/stylesheets" if Compass::Util.blank?(sass_dir)
# compiled css storage prompt
css_dir = ask("Where would you like Compass to store your compiled css files? (default: 'public/stylesheets/compiled')")
css_dir = "public/stylesheets/compiled" if Compass::Util.blank?(css_dir)
# use sudo for gem commands?
use_sudo = nil
if sudo_is_an_option? # dont give them the option if they are on a system that can't use sudo (aka windows)
use_sudo = yes?("Use sudo for the gem commands? (the default for your system is #{sudo_is_an_option? ? 'yes' : 'no'})")
end
use_sudo = sudo_is_an_option? if Compass::Util.blank?(use_sudo)
# define dependencies
gem "haml", :version => ">=3.0.0"
gem "compass", :version => ">= 0.10.0"
# install and unpack
rake "gems:install GEM=haml --trace", :sudo => use_sudo
rake "gems:install GEM=compass --trace", :sudo => use_sudo
rake "gems:unpack GEM=compass --trace"
# build out compass command
compass_command = "compass init rails . --css-dir=#{css_dir} --sass-dir=#{sass_dir} "
compass_command << "--using #{css_framework} " unless Compass::Util.blank?(css_framework)
# integrate it!
run "haml --rails ."
run compass_command

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.images_path).each do |sprite| Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.generated_images_path).each do |sprite|
remove sprite remove sprite
end end
end end

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