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

Shared Utilities

Mixins

view source

flow-into($target)

=flow-into($target)
  $target: unquote($target)
  +experimental(flow-into, $target, not -moz, -webkit, not -o, -ms, not -khtml, not official)

@mixin flow-into($target) {
  $target: unquote($target);
  @include experimental(flow-into, $target, not -moz, -webkit, not -o, -ms, not -khtml, not official);
}

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)

=flow-from($target)
  $target: unquote($target)
  +experimental(flow-from, $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);
}