Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)));
}
}
.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 {
width: 50%;
}
.col-1-3 {
width: 33.33333%;
}
.col-2-3 {
width: 66.66667%;
}
.col-1-4 {
width: 25%;
}
.col-2-4 {
width: 50%;
}
.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-2-6 {
width: 33.33333%;
}
.col-3-6 {
width: 50%;
}
.col-4-6 {
width: 66.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