Skip to content

Instantly share code, notes, and snippets.

@CrocoDillon
Created September 26, 2014 08:33
Show Gist options
  • Save CrocoDillon/0d33ef8d3a4a02eb22c3 to your computer and use it in GitHub Desktop.
Save CrocoDillon/0d33ef8d3a4a02eb22c3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$col-map: ();
@mixin col-span($cols, $total) {
$width: ($cols/$total) * 100%;
@if map-has-key($col-map, $width) {
@extend #{map-get($col-map, $width)};
}
@else {
width: $width;
$col-map: map-merge($col-map, ($width: nth(&, 1))) !global;
}
}
.col-1-2 { @include col-span(1, 2) }
.col-1-3 { @include col-span(1, 3) }
.col-2-3 { @include col-span(2, 3) }
.col-1-4 { @include col-span(1, 4) }
.col-2-4 { @include col-span(2, 4) }
.col-3-4 { @include col-span(3, 4) }
.col-1-5 { @include col-span(1, 5) }
.col-2-5 { @include col-span(2, 5) }
.col-3-5 { @include col-span(3, 5) }
.col-4-5 { @include col-span(4, 5) }
.col-1-6 { @include col-span(1, 6) }
.col-2-6 { @include col-span(2, 6) }
.col-3-6 { @include col-span(3, 6) }
.col-4-6 { @include col-span(4, 6) }
.col-5-6 { @include col-span(5, 6) }
.col-1-2, .col-2-4, .col-3-6 {
width: 50%;
}
.col-1-3, .col-2-6 {
width: 33.33333%;
}
.col-2-3, .col-4-6 {
width: 66.66667%;
}
.col-1-4 {
width: 25%;
}
.col-3-4 {
width: 75%;
}
.col-1-5 {
width: 20%;
}
.col-2-5 {
width: 40%;
}
.col-3-5 {
width: 60%;
}
.col-4-5 {
width: 80%;
}
.col-1-6 {
width: 16.66667%;
}
.col-5-6 {
width: 83.33333%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment