// Defining number of columns in the grid. // Common Values would be 12, 16 or 24 $width: 100%; $def_grid: 12; $margin: 0;
@mixin container(){
margin:0 auto; width:$width;
}
// Works out the width of elements based // on total number of columns and width // number of columns being displayed. // Removes 20px for margins @mixin grid($grid:$def_grid,$cols:”,$float:left,$display:inline){
display:$display; float:$float; width:(100%/$grid * $cols) - ($margin * 2);
}
// Allows for padding before element @mixin prefix($grid:$def_grid,$cols:”){
margin-left:(100%/$grid * $cols);
} // Allows for padding after element @mixin suffix($grid:$def_grid,$cols:”){
margin-right:(100%/$grid * $cols);
} // Removes left margin @mixin first(){
margin-left:0;
} // Removes right margin @mixin last(){
margin-right:0;
}
@mixin push($grid:$def_grid,$move:”) {
position:relative; left:(100%/$grid * $move);
}
@mixin pull($grid:$def_grid,$move:”){
position:relative; left:(100%/$grid * $move) * -1;
}