Source on Github

Compass Stretching

The stretch mixins allow you to style absolutely positioned elements such that they will stretch to fill their positioning parent.

This file can be imported using: @import "compass/layout/stretching"

Examples

Compass Stretch Layout Example
How to do stretch out your elements.

Mixins

view source 

=stretch-y($offset-top: 0, $offset-bottom: 0)
  +stretch($offset-top, false, $offset-bottom, false)

@mixin stretch-y($offset-top: 0, $offset-bottom: 0) {
  @include stretch($offset-top, false, $offset-bottom, false);
}

stretch element height to specified top and bottom position

view source 

=stretch-x($offset-left: 0, $offset-right: 0)
  +stretch(false, $offset-right, false, $offset-left)

@mixin stretch-x($offset-left: 0, $offset-right: 0) {
  @include stretch(false, $offset-right, false, $offset-left);
}

stretch element width to specified left and right position

view source 

=stretch($offset-top: 0, $offset-right: 0, $offset-bottom: 0, $offset-left: 0)
  position: absolute
  @if $offset-top
    top: $offset-top
  @if $offset-bottom
    bottom: $offset-bottom
  @if $offset-left
    left: $offset-left
  @if $offset-right
    right: $offset-right

@mixin stretch($offset-top: 0, $offset-right: 0, $offset-bottom: 0, $offset-left: 0) {
  position: absolute;
  @if $offset-top {
    top: $offset-top;
  }
  @if $offset-bottom {
    bottom: $offset-bottom;
  }
  @if $offset-left {
    left: $offset-left;
  }
  @if $offset-right {
    right: $offset-right;
  }
}

shorthand to stretch element height and width