Wrap

Crete wrapper element to hold content in a specific width and optional aside space.

Before using this module, remember to include base style.

.wrap {
  @include wrap(1024px, 16px);
}

Mixin

$max-width: pixels

$space-aside?: pixels

Usage

.wrap {
  @include wrap(1024px, 16px);
}

Example

Yellow color point padding ( $space-aside variable).

File Content (layout/wrap.scss)

@mixin wrap($max-width, $space-aside: 0px) {
  @if $space-aside != 0px {
    max-width: $max-width + $space-aside * 2;
    padding-right: $space-aside;
    padding-left: $space-aside;
  } @else {
    max-width: $max-width;
  }
}

@mixin wrap-style {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}