Skip to content

Instantly share code, notes, and snippets.

@danielr1996
Created February 14, 2022 15:49
Show Gist options
  • Save danielr1996/4bcaac6c5b508c6288c910c7c3808cbd to your computer and use it in GitHub Desktop.
Save danielr1996/4bcaac6c5b508c6288c910c7c3808cbd to your computer and use it in GitHub Desktop.
Dynamic scale for sass
//https://stackoverflow.com/questions/58069059/dynamic-spacing-classes-with-sass
@function fibonacci($n){
@if $n == 0{
@return 0;
} @else if $n == 1 or $n == 2{
@return 1;
}
@return fibonacci($n - 1) + fibonacci($n - 2);
}
@function range($fn, $to,$from: 1, ){
$list: [];
@for $i from $from through $to {
$list: append($list, call(get-function(fibonacci), $i));
}
@return $list;
}
@mixin generate() {
$sizes: range(fibonacci,$from: 10,$to: 12);
$sizes: append($sizes, 0);
@debug $sizes;
$spacing: 1rem;
$directions: ('left':'l', 'right':'r', 'top':'t', 'bottom':'b');
$properties: ('padding':'p', 'margin':'m');
@each $plong, $pshort in $properties {
@for $i from 1 through length($sizes) {
$size: nth($sizes, $i);
@each $dlong, $dshort in $directions {
.#{$pshort}#{$dshort}-#{$i - 1} {
#{$plong}-#{$dlong}: $spacing * $size;
}
}
.#{$pshort}x-#{$i - 1} {
#{$plong}-left: $spacing * $size;
#{$plong}-right: $spacing * $size;
}
.#{$pshort}y-#{$i - 1} {
#{$plong}-top: $spacing * $size;
#{$plong}-bottom: $spacing * $size;
}
.#{$pshort}-#{$i - 1} {
#{$plong}: $spacing * $size;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment