Q
Version: 1.0.1
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"

Examples

CSS Regions
css3 mixin for css regions

Imports

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

Configurable Variables help

$graceful-usage-threshold

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

Mixins

view source 

=flow-into($target)
  $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 

=flow-from($target)
  $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));
}