Add docs on the compass cross browser helper functions.

This commit is contained in:
Chris Eppstein 2010-12-31 15:06:41 -08:00
parent e11f1035bf
commit 068ee421f1
4 changed files with 117 additions and 9 deletions

View File

@ -8,7 +8,7 @@ gem 'mime-types'
gem 'serve', "1.0.0"
gem 'nokogiri'
gem 'coderay'
gem 'sass', ">= 3.1.0.alpha.50", :git => "git://github.com/chriseppstein/sass.git"
gem 'sass', ">= 3.1.0.alpha.50"
gem 'fssm', '0.1.2'
gem 'haml', ">= 3.1.0.alpha.36"
gem 'rake'

View File

@ -5,16 +5,10 @@ GIT
nanoc3 (3.2.0a3)
cri (>= 1.0.0)
GIT
remote: git://github.com/chriseppstein/sass.git
revision: c9de58c678644ec9b0ae5103ab595815e5aa4ecf
specs:
sass (3.1.0.alpha.50)
PATH
remote: ..
specs:
compass (0.11.alpha.4.02d6292)
compass (0.11.alpha.4.e11f103)
chunky_png (~> 0.10.3)
sass (>= 3.1.0.alpha.50)
@ -40,6 +34,7 @@ GEM
rake (0.8.7)
rdiscount (1.6.5)
ruby-prof (0.9.2)
sass (3.1.0.alpha.214)
serve (1.0.0)
activesupport (~> 3.0.1)
i18n (~> 0.4.1)
@ -67,6 +62,6 @@ DEPENDENCIES
rake
rdiscount
ruby-prof
sass (>= 3.1.0.alpha.50)!
sass (>= 3.1.0.alpha.50)
serve (= 1.0.0)
thor

View File

@ -35,9 +35,18 @@ layout: core
* [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files)
* [inline-image()](/reference/compass/helpers/inline-data/#inline-image)
* [nest()](/reference/compass/helpers/selectors/#nest)
* [prefix()](/reference/compass/helpers/cross-browser/#prefix)
* [prefixed()](/reference/compass/helpers/cross-browser/#prefixed)
* [pi()](/reference/compass/helpers/trig/#pi)
* [sin()](/reference/compass/helpers/trig/#sin)
* [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
* [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness)
* [tan()](/reference/compass/helpers/trig/#tan)
* [-css2()](/reference/compass/helpers/cross-browser/#-css2)
* [-moz()](/reference/compass/helpers/cross-browser/#-moz)
* [-ms()](/reference/compass/helpers/cross-browser/#-ms)
* [-o()](/reference/compass/helpers/cross-browser/#-o)
* [-pie()](/reference/compass/helpers/cross-browser/#-pie)
* [-svg()](/reference/compass/helpers/cross-browser/#-svg)
* [-webkit()](/reference/compass/helpers/cross-browser/#-webkit)

View File

@ -0,0 +1,104 @@
---
title: Compass Cross Browser Helpers
crumb: Cross Browser
framework: compass
meta_description: Helper functions for working with vendor prefixed functions.
layout: core
classnames:
- reference
- core
- helpers
---
%h1 Compass Cross Browser Helpers
:markdown
These helpers are used by compass to create mixins that can insulate
the user from cross browser syntax and vendor prefix complexities.
If you need to support a new experimental (prefixed) function in your
project using these helpers, you can add support for it adding the following
to your compass configuration file:
Compass::BrowserSupport.add_support("function-name", "webkit", "moz")
For an example of how to use these functions see the
[compass images module](https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_images.scss).
#prefixed.helper
%h3
%a(href="#prefixed")
prefixed(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
.details
%p
Returns true if any of the arguments require the given prefix.
#prefix.helper
%h3
%a(href="#prefix")
prefix(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
.details
%p
Transforms the argument(s) into a representation for the rendering engine
indicated by <code>$prefix</code>. Usually this means just adding a prefix,
but in some cases, this may result in entirely different representations for
the given rendering engine (E.g. linear-gradient).
%p
Values that do not have a specific representation are passed through without
being transformed.
#-webkit.helper
%h3
%a(href="#-webkit")
\-webkit(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-webkit, $arg, ...)</code>.
#-moz.helper
%h3
%a(href="#-moz")
\-moz(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-moz, $arg, ...)</code>.
#-o.helper
%h3
%a(href="#-o")
\-o(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-o, $arg, ...)</code>.
#-ms.helper
%h3
%a(href="#-ms")
\-ms(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-ms, $arg, ...)</code>.
#-svg.helper
%h3
%a(href="#-svg")
\-svg(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-svg, $arg, ...)</code>.
Instead of adding a prefix, it returns a representation of the
arguments using SVG to render them where it can.
#-pie.helper
%h3
%a(href="#-pie")
\-pie(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-pie, $arg, ...)</code>.
It it used to get <a href="/reference/compass/css3/pie/">CSS3 PIE</a>
support where necessary.
#-css2.helper
%h3
%a(href="#-css2")
\-css2(<span class="arg">$arg</span>, ...)
.details
%p
This is a shortcut for calling <code>prefix(-css2, $arg, ...)</code>.
It is a kind of hack to sanitize the output of experimental code
into a form that can be parsed by a css2.1 compliant parser.
Usually this results in causing some functions to be omitted.