Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS For Grids
// Grid related variables
// 995px by 26 columns
$gw-column: 20px;
$gw-gutter: 19px;
$grid-image: '/assets/images/content_images/995px-26col-20w-19gut.png';
// Grid span columns
@mixin span-columns($span: $columns) {
$columns: nth($span, 1);
display: block;
float: left;
width: grid-width($columns);
margin-right: $gw-gutter;
&:last-child {
margin-right: 0;
}
}
// Clearfix / row container
@mixin row($display: block) {
@include clearfix;
@if $display == table {
display: table;
}
@else {
display: block;
}
}
// Shift
@mixin shift($n-columns: 1) {
margin-left: $n-columns * $gw-column + $n-columns * $gw-gutter;
}
// Remove element gutter
@mixin omega($display: block, $direction: right) {
@if $display == table {
padding-#{$direction}: 0;
}
@else {
margin-#{$direction}: 0;
}
}
@mixin nth-omega($nth, $display: block, $direction: right) {
@if $display == table {
&:nth-child(#{$nth}) {
padding-#{$direction}: 0;
}
}
@else {
&:nth-child(#{$nth}) {
margin-#{$direction}: 0;
}
}
}
// Fill 100% of parent
@mixin fill-parent() {
width: 100%;
@if $border-box-sizing == false {
@include box-sizing(border-box);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.