_modular-scale.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // Scaling Variables
  2. $golden: 1.618;
  3. $minor-second: 1.067;
  4. $major-second: 1.125;
  5. $minor-third: 1.2;
  6. $major-third: 1.25;
  7. $perfect-fourth: 1.333;
  8. $augmented-fourth: 1.414;
  9. $perfect-fifth: 1.5;
  10. $minor-sixth: 1.6;
  11. $major-sixth: 1.667;
  12. $minor-seventh: 1.778;
  13. $major-seventh: 1.875;
  14. $octave: 2;
  15. $major-tenth: 2.5;
  16. $major-eleventh: 2.667;
  17. $major-twelfth: 3;
  18. $double-octave: 4;
  19. @function modular-scale($value, $increment, $ratio) {
  20. $v1: nth($value, 1);
  21. $v2: nth($value, length($value));
  22. $value: $v1;
  23. // scale $v2 to just above $v1
  24. @while $v2 > $v1 {
  25. $v2: ($v2 / $ratio); // will be off-by-1
  26. }
  27. @while $v2 < $v1 {
  28. $v2: ($v2 * $ratio); // will fix off-by-1
  29. }
  30. // check AFTER scaling $v2 to prevent double-counting corner-case
  31. $double-stranded: $v2 > $v1;
  32. @if $increment > 0 {
  33. @for $i from 1 through $increment {
  34. @if $double-stranded and ($v1 * $ratio) > $v2 {
  35. $value: $v2;
  36. $v2: ($v2 * $ratio);
  37. } @else {
  38. $v1: ($v1 * $ratio);
  39. $value: $v1;
  40. }
  41. }
  42. }
  43. @if $increment < 0 {
  44. // adjust $v2 to just below $v1
  45. @if $double-stranded {
  46. $v2: ($v2 / $ratio);
  47. }
  48. @for $i from $increment through -1 {
  49. @if $double-stranded and ($v1 / $ratio) < $v2 {
  50. $value: $v2;
  51. $v2: ($v2 / $ratio);
  52. } @else {
  53. $v1: ($v1 / $ratio);
  54. $value: $v1;
  55. }
  56. }
  57. }
  58. @return $value;
  59. }