@import compass/utilities // Configure grid coordinates $grid-columns: 12 !default $grid-pixels: 60px !default $grid-gutter-width: 20px !default @mixin grid-coordinates /* Grid-Coordinates by Adam Stacoviak Fork me: http://adamstac.com/grid-coordinates */ .grid-container margin: 0 auto overflow: hidden width: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width) .nested-grid-container display: inline-block margin: left: -$grid-gutter-width / 2 right: -$grid-gutter-width / 2 overflow: hidden width: auto @for $i from 1 through $grid-columns .grid-#{$i} @include grid($i) .grid-full @include grid($grid-columns) @for $i from 1 through $grid-columns - 1 .grid-prefix-#{$i} @include grid-prefix($i) @for $i from 1 through $grid-columns - 1 .grid-suffix-#{$i} @include grid-suffix($i) @mixin grid($grid-columns) @include grid-width($grid-columns) @include float-left margin: 0 $grid-gutter-width / 2 overflow: hidden @mixin grid-width($grid-columns) @if $grid-columns == 1 width: $grid-pixels @else width: ($grid-columns * $grid-pixels) + (($grid-columns * $grid-gutter-width) - $grid-gutter-width) @mixin grid-prefix($grid-columns) @if $grid-columns == 1 padding-left: $grid-pixels + $grid-gutter-width @else padding-left: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width) @mixin grid-suffix($grid-columns) @if $grid-columns == 1 padding-right: $grid-pixels + $grid-gutter-width @else padding-right: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width)