-
-
Save mmjaeger/fe4f762792b2df902c1661dcb83b4836 to your computer and use it in GitHub Desktop.
This Sass (SCSS) function utilises the Greated Common Divisor (gcd) to reduce duplicate styles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Algorithm to calculate the Lowest Common Denominator | |
@function gcd($a, $b){ | |
@if $b == 0 { | |
@return $a; | |
} @else { | |
@return gcd($b, $a%$b); | |
} | |
} | |
// Example Use-case: | |
// | |
// Mass generate classes for each percentage without duplicates | |
// | |
@for $i from 2 through 10 { | |
@for $ii from 1 to $i { | |
@if gcd($i,$ii) == 1 { | |
$percent: percentage(1/$i); | |
$fraction: #{$ii}-#{$i}; | |
.col-#{$fraction} { | |
@extend %column; | |
width: get_width($amount); | |
} | |
} | |
} | |
} | |
// | |
// Outputs to css | |
// | |
// .col-1-2 { width: 50%; } | |
// .col-1-3 { width: 33.3333333%; } | |
// .col-2-3 { width: 66.6666666%; } | |
// .col-1-4 { width: 25%; } | |
// .col-2-4 { width: 50%; } <-- Doesn't get created | |
// .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.6666666%; } | |
// .col-2-6 { width: 33.3333333%; } <-- Doesn't get created | |
// [etc...] | |
// |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment