Instantly share code, notes, and snippets.

@steverydz /grid.scss
Last active Aug 29, 2015

Embed
What would you like to do?
An example grid system using Sass mixins.
// Config
$container-width: 96% !default;
$container-max-width: 1200px !default;
$grid-base-outer-width: 940 !default;
$grid-base-col-width: 60 !default;
$grid-base-gutter-width: 20 !default;
$grid-cols: 12 !default;
// Clearfix
@mixin clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Container
@mixin container {
@include clearfix;
width: $container-width;
max-width: $container-max-width;
margin: 0 auto;
}
// Row
@mixin row {
@include clearfix;
}
// Grid columns
$grid-col-width: percentage($grid-base-col-width / $grid-base-outer-width);
$grid-gutter-width: percentage($grid-base-gutter-width / $grid-base-outer-width);
@mixin span-columns($cols) {
float: left;
width: ($grid-col-width + $grid-gutter-width) * $cols - $grid-gutter-width;
margin-right: $grid-gutter-width;
&:last-child {
margin-right: 0;
}
}
// Clears last column of row
@mixin omega($nth) {
&:nth-child(#{$nth}) {
margin-right: 0;
}
}
// Reset row
@mixin omega-reset($nth) {
&:nth-child(#{nth}) {
margin-right: $grid-gutter-width;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment