Add docs on the compass cross browser helper functions.
This commit is contained in:
parent
e11f1035bf
commit
068ee421f1
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
||||
|
104
doc-src/content/reference/compass/helpers/cross-browser.haml
Normal file
104
doc-src/content/reference/compass/helpers/cross-browser.haml
Normal 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.
|
Loading…
Reference in New Issue
Block a user