diff --git a/doc-src/content/examples/compass/css3/regions.haml b/doc-src/content/examples/compass/css3/regions.haml
new file mode 100644
index 00000000..2bcd04a8
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions.haml
@@ -0,0 +1,8 @@
+---
+title: CSS Regions
+description: css3 mixin for css regions
+framework: compass
+stylesheet: compass/css3/_regions.scss
+example: true
+---
+= render "partials/example"
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/regions/markup.haml b/doc-src/content/examples/compass/css3/regions/markup.haml
new file mode 100644
index 00000000..bb9d30e4
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions/markup.haml
@@ -0,0 +1,7 @@
+.source
+  %p
+    This is the source material
+
+.new-container
+  %p
+    This is the target location
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/regions/stylesheet.sass b/doc-src/content/examples/compass/css3/regions/stylesheet.sass
new file mode 100644
index 00000000..2fe10d07
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions/stylesheet.sass
@@ -0,0 +1,13 @@
+@import compass/css3
+
+.source   
+  +flow-into(target)
+  border: 10px solid green
+  margin: 20px
+  width: 200px
+
+.new-container 
+  +flow-from(target)
+  border: 10px solid red
+  margin: 20px
+  width: 200px
\ No newline at end of file
diff --git a/doc-src/content/reference/compass/css3/regions.haml b/doc-src/content/reference/compass/css3/regions.haml
new file mode 100644
index 00000000..b294a6b3
--- /dev/null
+++ b/doc-src/content/reference/compass/css3/regions.haml
@@ -0,0 +1,15 @@
+--- 
+title: Compass CSS Regions
+crumb: CSS Regions
+framework: compass
+stylesheet: compass/css3/_regions.scss
+meta_description: Specify CSS Regions for supported browsers.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    Provides two mixins for CSS regions, properties which allow you to flow content into new containers. See <a href="http://dev.w3.org/csswg/css3-regions/">the spec draft</a> and <a href="http://labs.adobe.com/technologies/cssregions/">Adobe's page on the topic</a>. 
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/_css3.scss b/frameworks/compass/stylesheets/compass/_css3.scss
index 8291bd16..a6d92635 100644
--- a/frameworks/compass/stylesheets/compass/_css3.scss
+++ b/frameworks/compass/stylesheets/compass/_css3.scss
@@ -14,3 +14,4 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
+@import "css3/regions";
\ No newline at end of file
diff --git a/frameworks/compass/stylesheets/compass/css3/_regions.scss b/frameworks/compass/stylesheets/compass/css3/_regions.scss
new file mode 100644
index 00000000..9b2f27cd
--- /dev/null
+++ b/frameworks/compass/stylesheets/compass/css3/_regions.scss
@@ -0,0 +1,22 @@
+@import "shared";
+
+// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
+//
+// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
+//
+// For a visual explanation, see the diagrams at Chris Coyier's
+// [CSS-Tricks](http://css-tricks.com/content-folding/)
+
+@mixin flow-into($target) {
+  $target: unquote($target);
+  @include experimental(flow-into, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}
+
+@mixin flow-from($target) {
+  $target: unquote($target);
+  @include experimental(flow-from, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}
\ No newline at end of file
diff --git a/test/fixtures/stylesheets/compass/css/regions.css b/test/fixtures/stylesheets/compass/css/regions.css
new file mode 100644
index 00000000..b85ea0ce
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/css/regions.css
@@ -0,0 +1,7 @@
+.source {
+  -webkit-flow-into: target;
+  -ms-flow-into: target; }
+
+.new-container {
+  -webkit-flow-from: target;
+  -ms-flow-from: target; }
diff --git a/test/fixtures/stylesheets/compass/sass/regions.scss b/test/fixtures/stylesheets/compass/sass/regions.scss
new file mode 100644
index 00000000..8d149ce5
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/sass/regions.scss
@@ -0,0 +1,4 @@
+@import "compass/css3/regions";
+
+.source   { @include flow-into(target); }
+.new-container { @include flow-from(target); }
\ No newline at end of file