// --------------------------------------------------------------------------- // Margin Mixins // Apply 'columns' margin before an element to push it along the grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin pre( $columns, $context : $total-columns, $from : $from-direction ) { $from : unquote($from); margin-#{$from}: space($columns,$context); } // 'push' is a synonymn for 'pre' @mixin push( $columns, $context : $total-columns, $from : $from-direction ) { $from : unquote($from); @include pre($columns,$context,$from) } // Apply negative 'columns' margin before an element to pull it along the grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin pull( $columns, $context : $total-columns, $from : $from-direction ) { $from : unquote($from); margin-#{$from}: 0 - space($columns, $context); } // Apply 'columns' margin after an element to contain it in a grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin post( $columns, $context : $total-columns, $from : $from-direction ) { $from : unquote($from); $to : opposite-position($from); margin-#{$to}: space($columns,$context); } // Apply 'columns' before and/or after an element to contain it on a grid. // // $pre : The number of columns to add as margin before. // $post : The number of columns to add as margin after. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin squish( $pre : false, $post : false, $context : $total-columns, $from : $from-direction ) { $from : unquote($from); @if $pre { @include pre($pre,$context,$from) } @if $post { @include post($post,$context,$from) } }