Merge branch 'stable'
Conflicts: VERSION.yml doc-src/Gemfile.lock
This commit is contained in:
commit
48d532b748
1
.gitignore
vendored
1
.gitignore
vendored
@ -29,3 +29,4 @@ devbin
|
|||||||
vendor/ruby
|
vendor/ruby
|
||||||
vendor
|
vendor
|
||||||
Gemfile.lock
|
Gemfile.lock
|
||||||
|
Compass.pkg
|
||||||
|
3
Gemfile
3
Gemfile
@ -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
|
||||||
|
37
Rakefile
37
Rakefile
@ -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
|
||||||
|
@ -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)
|
||||||
|
@ -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)
|
||||||
|
@ -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"
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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/
|
||||||
|
@ -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/)
|
||||||
|
|
@ -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.
|
||||||
|
@ -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
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user