Skip to content

Instantly share code, notes, and snippets.

@lunelson
Last active November 22, 2017 10:41
Show Gist options
  • Save lunelson/da1c943b99fd84a989cc to your computer and use it in GitHub Desktop.
Save lunelson/da1c943b99fd84a989cc to your computer and use it in GitHub Desktop.
Auto extending mixin based on GCD of width ratios
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----
// auto-extending includes for width ratios
// determines match by reducing argument fraction
@function gcd($a, $b) {
@if $b == 0 { @return abs($a); }
@return gcd($b, $a % $b);
}
@function reduce($n, $d) {
$g: gcd($n, $d);
@return ($n/$g, $d/$g)
}
@mixin col-size($n, $d) {
@if not variable-exists(col-size) { $col-size: () !global; }
$args: reduce($n, $d); $id: map-get($col-size, $args);
@if $id { @extend %#{$id}; }
@else {
$id: unique-id();
$col-size: map-merge($col-size, ($args: $id)) !global;
@at-root { %#{$id} { width: percentage($n / $d); } }
@extend %#{$id};
}
}
.foo { @include col-size(1, 2); }
.bar { @include col-size(5, 10); }
.baz { @include col-size(3, 4); }
.bif { @include col-size(9, 12); }
.debug { out: inspect($col-size); }
.foo, .bar {
width: 50%;
}
.baz, .bif {
width: 75%;
}
.debug {
out: ((1, 2): u0n11365f, (3, 4): u0n11365i);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment