Version: 1.1.alpha.0
Source on Github

Compass CSS Regions

Provides two mixins for CSS regions, properties which allow you to flow content into new containers. See the spec draft and Adobe's page on the topic.

This file can be imported using: @import "compass/css3/regions"


CSS Regions
css3 mixin for css regions


  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help


The prefixed support threshold for css regions. Defaults to the $graceful-usage-threshold.


view source

  $target: unquote($target)
  +prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target))
@mixin flow-into($target) {
  $target: unquote($target);
  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target));

Webkit, IE10 and future support for CSS 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

view source

  $target: unquote($target)
  +prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target))
@mixin flow-from($target) {
  $target: unquote($target);
  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target));