From 068ee421f1cc697cf91da8c0682ef9ba5dc08846 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Fri, 31 Dec 2010 15:06:41 -0800 Subject: [PATCH] Add docs on the compass cross browser helper functions. --- doc-src/Gemfile | 2 +- doc-src/Gemfile.lock | 11 +- .../content/reference/compass/helpers.haml | 9 ++ .../compass/helpers/cross-browser.haml | 104 ++++++++++++++++++ 4 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 doc-src/content/reference/compass/helpers/cross-browser.haml diff --git a/doc-src/Gemfile b/doc-src/Gemfile index d82f7a7e..aea55426 100644 --- a/doc-src/Gemfile +++ b/doc-src/Gemfile @@ -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' diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 20ea7971..d9511225 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -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 diff --git a/doc-src/content/reference/compass/helpers.haml b/doc-src/content/reference/compass/helpers.haml index 4903d283..340e1f45 100644 --- a/doc-src/content/reference/compass/helpers.haml +++ b/doc-src/content/reference/compass/helpers.haml @@ -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) diff --git a/doc-src/content/reference/compass/helpers/cross-browser.haml b/doc-src/content/reference/compass/helpers/cross-browser.haml new file mode 100644 index 00000000..b11f68d9 --- /dev/null +++ b/doc-src/content/reference/compass/helpers/cross-browser.haml @@ -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($prefix, $arg, ...) + .details + %p + Returns true if any of the arguments require the given prefix. + +#prefix.helper + %h3 + %a(href="#prefix") + prefix($prefix, $arg, ...) + .details + %p + Transforms the argument(s) into a representation for the rendering engine + indicated by $prefix. 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($arg, ...) + .details + %p + This is a shortcut for calling prefix(-webkit, $arg, ...). +#-moz.helper + %h3 + %a(href="#-moz") + \-moz($arg, ...) + .details + %p + This is a shortcut for calling prefix(-moz, $arg, ...). +#-o.helper + %h3 + %a(href="#-o") + \-o($arg, ...) + .details + %p + This is a shortcut for calling prefix(-o, $arg, ...). +#-ms.helper + %h3 + %a(href="#-ms") + \-ms($arg, ...) + .details + %p + This is a shortcut for calling prefix(-ms, $arg, ...). +#-svg.helper + %h3 + %a(href="#-svg") + \-svg($arg, ...) + .details + %p + This is a shortcut for calling prefix(-svg, $arg, ...). + 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($arg, ...) + .details + %p + This is a shortcut for calling prefix(-pie, $arg, ...). + It it used to get CSS3 PIE + support where necessary. +#-css2.helper + %h3 + %a(href="#-css2") + \-css2($arg, ...) + .details + %p + This is a shortcut for calling prefix(-css2, $arg, ...). + 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.