@function padding($gutter-width){

@return ($gutter-width/2) +px;

} //————————————————– // flexi-grids mixin // created by : Mr.Flexi // date: 15 May 2014 // Source : sass-flexi.com/ //————————————————–

// 1- Placeholder //————————————————– // Clearfix // Source: nicolasgallagher.com/micro-clearfix-hack/ // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // contenteditable attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that are clearfixed. // 2. The use of ‘table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements.

%clear{

&:before, &:after{
    content: " ";
    display: table;
}
&:after{
    clear: both;
}

}

// Box sizing %box-sizing{

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

// column elemnet %column{

position: relative;
min-height: 1px;
padding:0 padding($gutter-width:30);

}

//————————————————–

// 2- Mixin //————————————————–

// Box sizing @mixin box-sizing($border-box:border-box){

-webkit-box-sizing: $border-box;
-moz-box-sizing: $border-box;
box-sizing: $border-box;

}

// Container @mixin container($gutter-width:30){

margin: 0 auto; // center the conatiner
padding: 0 (($gutter-width/2)+px);
@extend %clear;

}

// Wrapper @mixin wrapper($gutter-width:30){

margin: 0 (($gutter-width/ -2)+px);
*zoom:1;
@extend %clear;

}

// columns @mixin columns($property:col,$total-columns:12){

@for $i from 1 through $total-columns{
    .#{$property}-#{$i}{
        @extend %column;
    }
}

}

// float @mixin float($property,$total-columns:12){

 @for $i from 1 through $total-columns{
    .#{$property}-#{$i}{
        @extend %float;
    }
}

}

// Generate column width, offset, push, and pull @mixin grids($property,$total-columns:12){

@if $property == col{
    @for $i from 1 through $total-columns{
        .#{$property}-#{$i}{
            width:((100/$total-columns)*$i) * 1%;

        }
    }
}
@if $property == offset{
    @for $i from 1 through $total-columns{
        .#{$property}-#{$i}{
            margin-left: ((100/$total-columns)*$i) * 1%;
        }
    }
}
@if $property == push{
    @for $i from 1 through $total-columns{
        .#{$property}-#{$i}{
            left:((100/$total-columns)*$i) * 1%;
        }
    }
}
@if $property == pull{
    @for $i from 1 through $total-columns{
        .#{$property}-#{$i}{
            right: ((100/$total-columns)*$i) * 1%;
        }
    }
}

}