Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass grid construction
// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.
// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
@if $b == 0 {
@return $a;
}
@else {
@return gcf($b, $a % $b)
}
}
// Check if a list contains a value
@function contains($list, $value) {
@if type-of($list) == list {
@return not not index($list, $value);
} @else {
@return $list == $value;
}
}
// Fluid grid units & offsets
@mixin units-build($units) {
@each $n in $units {
// avoids writing rules like `unit-12-12`
// just use a generic `unit-full` class
$x: $n - 1;
@for $i from 1 through $x {
// find the greatest common factor
$g: gcf($i, $n);
// initialize variables
$i-r: ();
$n-r: ();
@if $g > 1 {
// reduced value of $i
$i-r: $i/$g;
// reduced value of $n
$n-r: $n/$g;
}
// check if the reduced value of $n was also supplied
// in the list of units to be built
$canreduce: contains($units, $n-r);
.unit-#{$i}-#{$n} {
// if this unit can be reduced
// extend the previous rule
@if $i-r and $canreduce {
@extend .unit-#{$i-r}-#{$n-r};
}
// otherwise create a new width
@else {
width: percentage($i / $n);
}
}
}
}
}
@include units-build(2 3 4 5 6 12);
@mixin units-build($units) {
@each $n in $units {
$x: $n - 1;
@for $i from 1 through $x {
// units
.unit-#{$i}-#{$n} {
width: percentage($i / $n);
}
}
}
}
@include units-build(2 3 4 5 6 12);
.unit-1-2,
.unit-2-4,
.unit-3-6,
.unit-6-12 {
width: 50%;
}
.unit-1-3,
.unit-2-6,
.unit-4-12 {
width: 33.333%;
}
.unit-2-3,
.unit-4-6,
.unit-8-12 {
width: 66.667%;
}
.unit-1-4,
.unit-3-12 {
width: 25%;
}
.unit-3-4,
.unit-9-12 {
width: 75%;
}
.unit-1-5 {
width: 20%;
}
.unit-2-5 {
width: 40%;
}
.unit-3-5 {
width: 60%;
}
.unit-4-5 {
width: 80%;
}
.unit-1-6,
.unit-2-12 {
width: 16.667%;
}
.unit-5-6,
.unit-10-12 {
width: 83.333%;
}
.unit-1-12 {
width: 8.333%;
}
.unit-5-12 {
width: 41.667%;
}
.unit-7-12 {
width: 58.333%;
}
.unit-11-12 {
width: 91.667%;
}
.unit-1-2 {
width: 50%;
}
.unit-1-3 {
width: 33.333%;
}
.unit-2-3 {
width: 66.667%;
}
.unit-1-4 {
width: 25%;
}
.unit-2-4 {
width: 50%;
}
.unit-3-4 {
width: 75%;
}
.unit-1-5 {
width: 20%;
}
.unit-2-5 {
width: 40%;
}
.unit-3-5 {
width: 60%;
}
.unit-4-5 {
width: 80%;
}
.unit-1-6 {
width: 16.667%;
}
.unit-2-6 {
width: 33.333%;
}
.unit-3-6 {
width: 50%;
}
.unit-4-6 {
width: 66.667%;
}
.unit-5-6 {
width: 83.333%;
}
.unit-1-12 {
width: 8.333%;
}
.unit-2-12 {
width: 16.667%;
}
.unit-3-12 {
width: 25%;
}
.unit-4-12 {
width: 33.333%;
}
.unit-5-12 {
width: 41.667%;
}
.unit-6-12 {
width: 50%;
}
.unit-7-12 {
width: 58.333%;
}
.unit-8-12 {
width: 66.667%;
}
.unit-9-12 {
width: 75%;
}
.unit-10-12 {
width: 83.333%;
}
.unit-11-12 {
width: 91.667%;
}
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.