@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%; } } }
}