Merge branch 'stable'

Conflicts:
	VERSION.yml
	doc-src/Gemfile.lock
This commit is contained in:
Chris Eppstein 2012-03-14 00:23:50 -07:00
commit 48d532b748
14 changed files with 188 additions and 97 deletions

1
.gitignore vendored
View File

@ -29,3 +29,4 @@ devbin
vendor/ruby vendor/ruby
vendor vendor
Gemfile.lock Gemfile.lock
Compass.pkg

View File

@ -2,6 +2,7 @@ source :rubygems
gemspec gemspec
unless ENV['PKG']
gem "cucumber", "~> 1.1.4" gem "cucumber", "~> 1.1.4"
gem "rspec", "~>2.0.0" gem "rspec", "~>2.0.0"
gem "rails", "~> 3.1" gem "rails", "~> 3.1"
@ -25,4 +26,6 @@ unless ENV["CI"]
gem 'guard' gem 'guard'
gem 'guard-test' gem 'guard-test'
gem 'guard-cucumber' gem 'guard-cucumber'
gem 'packager'
end
end end

View File

@ -1,7 +1,16 @@
require 'rubygems' require 'rubygems'
require 'bundler' if ENV["PKG"]
Bundler.setup $: << File.expand_path(File.dirname(__FILE__))+"/lib"
require 'rake/dsl_definition' rescue nil else
require 'bundler'
Bundler.setup
end
begin
require 'rake/dsl_definition'
rescue LoadError
#pass
end
require 'compass' require 'compass'
# ----- Default: Testing ------ # ----- Default: Testing ------
@ -10,12 +19,17 @@ task :default => [:test, :features]
require 'rake/testtask' require 'rake/testtask'
require 'fileutils' require 'fileutils'
begin
require 'cucumber' require 'cucumber'
require 'cucumber/rake/task' require 'cucumber/rake/task'
Cucumber::Rake::Task.new(:features) do |t| Cucumber::Rake::Task.new(:features) do |t|
t.cucumber_opts = "features --format progress" t.cucumber_opts = "features --format progress"
end end
rescue LoadError
$stderr.puts "cannot load cucumber"
end
Rake::TestTask.new :test do |t| Rake::TestTask.new :test do |t|
t.libs << 'lib' t.libs << 'lib'
@ -124,3 +138,20 @@ rescue LoadError => e
puts "WARNING: #{e}" puts "WARNING: #{e}"
end end
begin
require 'packager/rake_task'
require 'compass/version'
# Building a package:
# 1. Get packager installed and make sure your system is setup correctly according to their docs.
# 2. Make sure you are actually using a universal binary that has been nametooled.
# 3. PKG=1 OFFICIAL=1 rake packager:pkg
Packager::RakeTask.new(:pkg) do |t|
t.package_name = "Compass"
t.version = Compass::VERSION
t.domain = "compass-style.org"
t.bin_files = ["compass"]
t.resource_files = FileList["frameworks/**/*"] + ["VERSION.yml", "LICENSE.markdown"]
end
rescue LoadError => e
puts "WARNING: #{e}"
end

View File

@ -7,7 +7,7 @@ Gem::Specification.new do |gemspec|
gemspec.version = Compass::VERSION # Update VERSION.yml file to set this. gemspec.version = Compass::VERSION # Update VERSION.yml file to set this.
gemspec.description = "Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS." gemspec.description = "Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS."
gemspec.homepage = "http://compass-style.org" gemspec.homepage = "http://compass-style.org"
gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger", "Scott Davis"] gemspec.authors = ["Chris Eppstein", "Scott Davis", "Eric A. Meyer", "Brandon Mathis", "Anthony Short", "Nico Hagenburger"]
gemspec.email = "chris@eppsteins.net" gemspec.email = "chris@eppsteins.net"
#gemspec.default_executable = "compass" #deprecated #gemspec.default_executable = "compass" #deprecated
gemspec.executables = %w(compass) gemspec.executables = %w(compass)

View File

@ -1,11 +1,13 @@
GIT GIT
remote: git://github.com/Compass/compass-theme.git remote: git://github.com/Compass/compass-theme.git
revision: aae72f14a1c150dffe9612623136fabdfff2b84d revision: aae72f14a1c150dffe9612623136fabdfff2b84d
PATH
remote: ..
specs: specs:
compass-theme (0.0.2) compass (0.12.0.6754be1)
compass (~> 0.11) chunky_png (~> 1.2)
compass-susy-plugin (~> 0.7.0) fssm (>= 0.2.7)
css-slideshow (= 0.2.0) sass (~> 3.1)
PATH PATH
remote: .. remote: ..
@ -24,8 +26,8 @@ GEM
builder (3.0.0) 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.7.0) compass-susy-plugin (0.9)
compass (>= 0.10.0) compass (>= 0.11.1)
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)
@ -43,7 +45,11 @@ GEM
rb-fsevent (0.4.0) rb-fsevent (0.4.0)
rdiscount (1.6.8) rdiscount (1.6.8)
ruby-prof (0.10.8) ruby-prof (0.10.8)
<<<<<<< HEAD
sass (3.2.0.alpha.93) sass (3.2.0.alpha.93)
=======
sass (3.1.15)
>>>>>>> stable
serve (1.0.0) serve (1.0.0)
activesupport (~> 3.0.1) activesupport (~> 3.0.1)
i18n (~> 0.4.1) i18n (~> 0.4.1)

View File

@ -1,6 +1,6 @@
@import compass/css3 @import compass/css3
+font-face("Blooming Grove", font-files("examples/bgrove.ttf", truetype, "examples/bgrove.otf", opentype)) +font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))
.example .example
font-family: "Blooming Grove" font-family: "Blooming Grove"

View File

@ -278,15 +278,28 @@ Getting recent changes from the main repo:
<h3 id="running-tests">Running Tests</h3> <h3 id="running-tests">Running Tests</h3>
1. Install development dependencies: 1. You must have Ruby installed on your system. After [setting up git](#setting-up-git),
change to the root directory of your git checkout of Compass.
cd compass
2. Install the bundler Ruby gem.
gem install bundler
If installing to your system gems, you'll probably need to add `sudo` to the
front of that command. If you don't know what that means, you probably need
to add `sudo` to the front.
3. Install development dependencies:
bundle install --binstubs devbin bundle install --binstubs devbin
2. Running core library and stylesheet tests: 4. Running core library and stylesheet tests:
rake run_tests bundle exec rake test features
3. Running behavior tests 5. Running behavior tests
./devbin/cucumber ./devbin/cucumber

View File

@ -1,12 +1,12 @@
--- ---
title: "Compass v0.12 (Release Candidate) is Released" title: "Compass v0.12 is Released"
description: "Compass 0.12: Flexible Sprites, Rails Integration" description: "Compass 0.12: Flexible Sprites, Rails Integration"
author: chris author: chris
--- ---
Compass 0.12 release candidate is out! Install it now: Compass 0.12 is out! Install it now:
$ (sudo) gem install compass --pre $ (sudo) gem install compass
This release is primarily to support the Rails Asset Pipeline which This release is primarily to support the Rails Asset Pipeline which
required major changes to the Compass internals. If you use rails required major changes to the Compass internals. If you use rails
@ -36,12 +36,14 @@ Additionally there are many new CSS3 improvements, bug fixes, and other
small enhancements that you can read about in the small enhancements that you can read about in the
[CHANGELOG](/CHANGELOG/). [CHANGELOG](/CHANGELOG/).
What's next for Compass? The Sass 3.2 release is coming soon and I'd What's next for Compass? First, we've added [Anthony
very much like the 0.13 release of compass to take advantage of the Short](/blog/2012/03/11/anthony-short-joins-the-compass-core-team/) to
great features that it offers. Additionally, we're working on an the team and we're really excited to see him come make our stylesheets
extension registry where you can post your compass extensions and even more awesome. The Sass 3.2 release is coming soon and the 0.13
discover new ones. Lastly, we'll be extracting blueprint to a release of compass will take advantage of the great features that it
compass extension as that project seems to have stagnated. I'd say offers. Additionally, we're working on an extension registry where you
we're getting pretty close to a 1.0 release! 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/ [compass-rails]: /blog/2012/01/29/compass-and-rails-integration/

View File

@ -0,0 +1,25 @@
---
title: "Anthony Short joins the Compass core team"
description: "We're excited to announce a new team member: Anthony Short"
author: chris
---
Please join us in welcoming Anthony Short to the Compass core team.
Anthony has been an active member in the "CSS Compiler" community for
a very long time now. A couple years ago he shut down his own CSS
compiler project called [Scaffold](https://github.com/anthonyshort/Scaffold)
and gave his backing to the Sass/Compass community. Since then, he
has been an active member of our community.
Anthony is a Designer and Developer at [Newism](http://newism.com.au/) a
web design and marketing firm in Newcastle, Australia. His depth and
breadth of knowledge about CSS and cutting-edge design is evident in
his work and his excellent pattern library for Compass:
[Stitch](https://github.com/anthonyshort/stitch-css).
You can find Anthony on the web at these fine locations:
* [Github](https://github.com/anthonyshort)
* [Twitter](https://twitter.com/#!/anthonyshort)
* [Blog](http://anthonyshort.me/)

View File

@ -16,13 +16,10 @@ documented_functions:
#font-files.helper #font-files.helper
%h3 %h3
%a(href="#font-files") %a(href="#font-files")
font-files([<span class="arg">$font</span>, <span class="arg">$format</span>]*) font-files([<span class="arg">$font</span>]*)
.details .details
%p %p
The <code>font-files</code> function takes any even number of arguments. The <code>font-files</code> function takes a list of arguments containing the path to each font files relative to your project's font directory.
For each pair of arguments, the first is the path to the font file
relative to your project's font directory and the second is the format of
that font.
%p %p
This helper is used with the <a href="/reference/compass/css3/font_face/#mixin-font-face"><code>font-face</code> mixin</a> This helper is used with the <a href="/reference/compass/css3/font_face/#mixin-font-face"><code>font-face</code> mixin</a>
and is what makes it possible to pass any number of font files. and is what makes it possible to pass any number of font files.

View File

@ -1,8 +1,8 @@
--- ---
title: Compass Sprite Helpers title: CSS Sprite Helpers for Compass
crumb: Sprites crumb: Sprites
framework: compass framework: compass
meta_description: Helper functions for working with Sprite images. meta_description: Helper functions for working with CSS Sprite images.
layout: core layout: core
classnames: classnames:
- reference - reference
@ -16,13 +16,13 @@ documented_functions:
- "sprite-url" - "sprite-url"
- "sprite-position" - "sprite-position"
--- ---
%h1 Compass Sprite Helpers %h1 <strong>CSS Sprite</strong> Helpers for Compass
:markdown :markdown
These helpers make it easier to build and to work with sprites. These helpers make it easier to build and to work with <em>css sprites</em>.
While it is allowed to use these directly, to do so is considered "advanced usage". While it is allowed to use these directly, to do so is considered "advanced usage".
It is recommended that you instead use the sprite mixins that are designed to work It is recommended that you instead use the css sprite mixins that are designed to work
with these functions. with these functions.
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information. See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
@ -33,31 +33,31 @@ documented_functions:
sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>) sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
.details .details
:markdown :markdown
Generates a sprite map from the files matching the glob pattern. Uses the Generates a css sprite map from the files matching the glob pattern. Uses the
keyword-style arguments passed in to control the placement. keyword-style arguments passed in to control the placement.
Only PNG files can be made into sprites at this time. Only PNG files can be made into css sprites at this time.
The `$glob` should be glob pattern relative to the images directory that specifies The `$glob` should be glob pattern relative to the images directory that specifies
what files will be in the sprite. For example: what files will be in the css sprite. For example:
$icons: sprite-map("icons/*.png"); $icons: sprite-map("icons/*.png");
background: $icons; background: $icons;
This will generate a sprite map and return a reference to it. It's important to This will generate a css sprite map and return a reference to it. It's important to
capture this to a variable, because you will need to use it later when creating capture this to a variable, because you will need to use it later when creating
sprites. In the above example you might end up with a new file named css sprites. In the above example you might end up with a new file named
`images/sprites/icons-a2ef041.png` and your css stylesheet will have: `images/sprites/icons-a2ef041.png` and your css stylesheet will have:
background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat; background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
The exact image name is not something you should depend on as it may change based on the The exact image name is not something you should depend on as it may change based on the
arguments you pass in. Instead, you can use the `sprite-url()` function to create a arguments you pass in. Instead, you can use the `sprite-url()` function to create a
reference to the sprite map without generating the image again. Alternatively, simply reference to the css sprite map without generating the image again. Alternatively, simply
using the sprite map variable in an property will have the same effect as calling using the sprite map variable in an property will have the same effect as calling
`sprite-url()`. `sprite-url()`.
For each sprite in the sprite map you can control the position, spacing, and whether or For each sprite in the css sprite map you can control the position, spacing, and whether or
not it repeats. You do this by passing arguments to this function that tell each sprite not it repeats. You do this by passing arguments to this function that tell each sprite
how to behave. For instance if there is a icons/new.png then you can control it like so: how to behave. For instance if there is a icons/new.png then you can control it like so:
@ -91,8 +91,8 @@ documented_functions:
sprite-map-name(<span class="arg">$map</span>) sprite-map-name(<span class="arg">$map</span>)
.details .details
:markdown :markdown
Returns the name of a sprite map Returns the name of a css sprite map
The name is derived from the folder than contains the sprites. The name is derived from the folder than contains the css sprites.
#sprite-file.helper #sprite-file.helper
%h3 %h3

View File

@ -1,18 +1,18 @@
@import "compass/layout/grid-background"; @import "compass/layout/grid-background";
// The base font size // The base font size.
$base-font-size: 16px !default; $base-font-size: 16px !default;
// The base line height is the basic unit of line hightness. // The base line height determines the basic unit of vertical rhythm.
$base-line-height: 24px !default; $base-line-height: 24px !default;
// set the default border style for rhythm borders // Set the default border style for rhythm borders.
$default-rhythm-border-style: solid !default; $default-rhythm-border-style: solid !default;
// The IE font ratio is a fact of life. Deal with it. // The IE font ratio is a fact of life. Deal with it.
$ie-font-ratio: 16px / 100%; $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 pixels 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 // Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
@ -25,26 +25,26 @@ $round-to-nearest-half-line: false !default;
$min-line-padding: 2px !default; $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` is true.
$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default; $font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;
// The basic unit of font rhythm // The basic unit of font rhythm.
$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit; $base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;
// The leader is the amount of whitespace in a line. // The leader is the amount of whitespace in a line.
// It might be useful in your calculations // It might be useful in your calculations.
$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size; $base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;
// The half-leader is the amount of whitespace above and below a line. // The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations // It might be useful in your calculations.
$base-half-leader: $base-leader / 2; $base-half-leader: $base-leader / 2;
// True if a number has a relative unit // True if a number has a relative unit.
@function relative-unit($number) { @function relative-unit($number) {
@return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem" @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"
} }
// True if a number has an absolute unit // True if a number has an absolute unit.
@function absolute-unit($number) { @function absolute-unit($number) {
@return not (relative-unit($number) or unitless($number)); @return not (relative-unit($number) or unitless($number));
} }
@ -53,7 +53,7 @@ $base-half-leader: $base-leader / 2;
@warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit."; @warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.";
} }
// Establishes a font baseline for the given font-size in pixels // Establishes a font baseline for the given font-size.
@mixin establish-baseline($font-size: $base-font-size) { @mixin establish-baseline($font-size: $base-font-size) {
body { body {
font-size: $font-size / $ie-font-ratio; font-size: $font-size / $ie-font-ratio;
@ -70,7 +70,7 @@ $base-half-leader: $base-leader / 2;
} }
// 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.
@mixin debug-vertical-alignment($img: false) { @mixin debug-vertical-alignment($img: false) {
@if $img { @if $img {
@ -80,11 +80,11 @@ $base-half-leader: $base-leader / 2;
} }
} }
// Adjust a block to have a different font size and leading to maintain the rhythm. // Adjust a block to have a different font size and line height to maintain the
// $lines is a number that is how many times the baseline rhythm this // rhythm. $lines specifies how many multiples of the baseline rhythm each line
// font size should use up. Does not have to be an integer, but it defaults // of this font should use up. It does not have to be an integer, but it
// to the smallest integer that is large enough to fit the font. // defaults to the smallest integer that is large enough to fit the font.
// Use $from_size to adjust from a non-base font-size. // Use $from-size to adjust from a font-size other than the base font-size.
@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) { @mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
@if not $relative-font-sizing and $from-size != $base-font-size { @if not $relative-font-sizing and $from-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to"; @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
@ -93,14 +93,15 @@ $base-half-leader: $base-leader / 2;
@include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size)); @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));
} }
// Adjust a block to have different line height to maintain the rhythm.
// $lines specifies how many multiples of the baseline rhythm each line of this
// font should use up. It does not have to be an integer, but it defaults to the
// smallest integer that is large enough to fit the font.
@mixin adjust-leading-to($lines, $font-size: $base-font-size) { @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
@if not $relative-font-sizing and $font-size != $base-font-size { line-height: rhythm($lines, $font-size);
@warn "$relative-font-sizing is false but a relative font size was passed to adjust-leading-to";
}
line-height: $font-unit * $lines * $base-line-height / $font-size;
} }
// Calculate rhythm units // Calculate rhythm units.
@function rhythm( @function rhythm(
$lines: 1, $lines: 1,
$font-size: $base-font-size $font-size: $base-font-size
@ -109,9 +110,14 @@ $base-half-leader: $base-leader / 2;
@warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"; @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
} }
$rhythm: $font-unit * $lines * $base-line-height / $font-size; $rhythm: $font-unit * $lines * $base-line-height / $font-size;
// Round the pixels down to nearest integer.
@if unit($rhythm) == px {
$rhythm: floor($rhythm);
}
@return $rhythm; @return $rhythm;
} }
// Calculate the minimum multiple of rhythm units needed to contain the font-size.
@function lines-for-font-size($font-size) { @function lines-for-font-size($font-size) {
$lines: if($round-to-nearest-half-line, $lines: if($round-to-nearest-half-line,
ceil(2 * $font-size / $base-line-height) / 2, ceil(2 * $font-size / $base-line-height) / 2,
@ -122,46 +128,37 @@ $base-half-leader: $base-leader / 2;
@return $lines; @return $lines;
} }
// Apply leading whitespace // Apply leading whitespace. The $property can be margin or padding.
@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) { @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size); #{$property}-top: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: floor($leader)
}
#{$property}-top: $leader;
} }
// Apply leading whitespace as padding // Apply leading whitespace as padding.
@mixin padding-leader($lines: 1, $font-size: $base-font-size) { @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, padding); padding-top: rhythm($lines, $font-size);
} }
// Apply leading whitespace as margin // Apply leading whitespace as margin.
@mixin margin-leader($lines: 1, $font-size: $base-font-size) { @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
@include leader($lines, $font-size, margin); margin-top: rhythm($lines, $font-size);
} }
// Apply trailing whitespace // Apply trailing whitespace. The $property can be margin or padding.
@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) { @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
$leader: rhythm($lines, $font-size); #{$property}-bottom: rhythm($lines, $font-size);
@if unit($leader) == px {
$leader: ceil($leader)
}
#{$property}-bottom: $leader;
} }
// Apply trailing whitespace as padding // Apply trailing whitespace as padding.
@mixin padding-trailer($lines: 1, $font-size: $base-font-size) { @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, padding); padding-bottom: rhythm($lines, $font-size);
} }
// Apply trailing whitespace as margin // Apply trailing whitespace as margin.
@mixin margin-trailer($lines: 1, $font-size: $base-font-size) { @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
@include trailer($lines, $font-size, margin); margin-bottom: rhythm($lines, $font-size);
} }
// Whitespace application shortcut // Shorthand mixin to apply whitespace for top and bottom margins and padding.
// Apply top margin/padding + bottom padding/margin
@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) { @mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
@include leader($leader, $font-size); @include leader($leader, $font-size);
@include padding-leader($padding-leader, $font-size); @include padding-leader($padding-leader, $font-size);
@ -169,8 +166,8 @@ $base-half-leader: $base-leader / 2;
@include trailer($trailer, $font-size); @include trailer($trailer, $font-size);
} }
// Apply a border width to any side without destroying the vertical rhythm. // Apply a border and whitespace to any side without destroying the vertical
// The available space ($lines) must be greater than the width of your border. // rhythm. The whitespace must be greater than the width of the border.
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@if not $relative-font-sizing and $font-size != $base-font-size { @if not $relative-font-sizing and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border";
@ -182,33 +179,35 @@ $base-half-leader: $base-leader / 2;
padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width); padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width);
} }
// Aplly rhythm borders equally to all sides // Apply borders and whitespace equally to all sides.
@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@if not $relative-font-sizing and $font-size != $base-font-size { @if not $relative-font-sizing and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"; @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders";
} }
border: { border: {
style: $border-style; style: $border-style;
width: $font-unit * $width / $font-size; }; width: $font-unit * $width / $font-size;
};
padding: $font-unit / $font-size * ($lines * $base-line-height - $width); padding: $font-unit / $font-size * ($lines * $base-line-height - $width);
} }
// Apply a leading rhythm border // Apply a leading border.
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
} }
// Apply a trailing rhythm border // Apply a trailing border.
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
} }
// Apply both leading and trailing rhythm borders // Apply both leading and trailing borders.
@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include leading-border($width, $lines, $font-size, $border-style); @include leading-border($width, $lines, $font-size, $border-style);
@include trailing-border($width, $lines, $font-size, $border-style); @include trailing-border($width, $lines, $font-size, $border-style);
} }
// Alias for `horizontal-borders` mixin.
@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) { @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
@include horizontal-borders($width, $lines, $font-size, $border-style); @include horizontal-borders($width, $lines, $font-size, $border-style);
} }

View File

@ -5,7 +5,8 @@ module Compass::SassExtensions::Functions::FontFiles
:opentype => 'opentype', :opentype => 'opentype',
:ttf => 'truetype', :ttf => 'truetype',
:truetype => 'truetype', :truetype => 'truetype',
:svg => 'svg' :svg => 'svg',
:eot => 'embedded-opentype'
} }
def font_files(*args) def font_files(*args)
@ -24,7 +25,8 @@ module Compass::SassExtensions::Functions::FontFiles
if FONT_TYPES.key? type if FONT_TYPES.key? type
skip_next = true skip_next = true
else else
type = arg.to_s.split('.').last.gsub('"', '').to_sym # let pass url like font.type?thing#stuff
type = arg.to_s.split('.').last.gsub(/(\?(.*))?(#(.*))?"/, '').to_sym
end end
if FONT_TYPES.key? type if FONT_TYPES.key? type

View File

@ -126,6 +126,18 @@ class SassExtensionsTest < Test::Unit::TestCase
evaluate("font-files('/font/name.woff')") evaluate("font-files('/font/name.woff')")
end end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.svg#fontId')")
end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.eot?#iefix')")
end
assert_nothing_raised Sass::SyntaxError do
evaluate("font-files('/font/name.svg?mightbedynamic=something%20+escaped#fontId')")
end
assert_raises Sass::SyntaxError do assert_raises Sass::SyntaxError do
evaluate("font-files('/font/name.ext')") evaluate("font-files('/font/name.ext')")
end end