Generating font sizes for headings, constrained by a maximum size for h1 and a minimum size for h6?

[Andrey Mikhaylov (lolmaus)]

In most of my projects i'm using a mixin to generate font sizes for headings.

It accepts the maximum and minimum font-sizes for h1 and h6 respectively and generates font-sizes evenly:

+heading-sizes-even(30px, 16px)

Result:

The mixin is super simple:

=heading-sizes-even($max: 30px, $min: 16px, $start-h: 1, $end-h: 6, $debug: false)

  $number-of-headings: $end-h - $start-h + 1
  $increment: ($max - $min) / ($number-of-headings - 1)

  @for $i from 1 through $number-of-headings
    h#{$start-h + $i - 1}
      $size: $min + ($increment * ($number-of-headings - $i))
      font-size: $size

      @if $debug
        &:after
          content: "#{$size}"

I've been wondering how to include support for modular scale to this mixin. I wish that the distribution of sizes was not even but proportional to e. g. golden ratio. I'm no good at math and i fail to come up with a solution.

Can you please suggest a solution?

Ultimately, i would like to see the described functionality in the modular-scale extension. Something like:

+modular-scale-heading-sizes($sizes: 30px 16px, $headings: 1 6, $ratio: golden())

[Andrey Mikhaylov (lolmaus)]

Okay, i wasted half of my day but i did manage to code the mixin! :D

Here's the source: https://gist.github.com/lolmaus/7825675

Here's example usage:

.even
  +heading-sizes(2em, 1em, $debug: true)

.golden
  +heading-sizes(2em, 1em, $ratio: golden(), $debug: true)

.fourth
  +heading-sizes(2em, 1em, $ratio: fourth(), $debug: true)

.octave
  +heading-sizes(2em, 1em, $ratio: octave(), $debug: true)

Here's the result:

I'm leaving this open for you to consider including this into modular-scale.

[Scott Kellum]

Out if scope of this particular project although I encourage you to create a new project with this.

[Andrey Mikhaylov (lolmaus)]

Thanks for replying @scottkellum!

It's a tiny snippet, do you think it's reasonable to start a separate extension?

As a Sass enthusiast, i've got a number of such little snippets. I was also considering to release a batch extension like Toolkit and Scut, but my collection of snippets is too small for this as well.

So i'm just keeping them in partials, copy-pasting from project to project...

[Scott Kellum]

@lolmaus You can start with a personal framework and it will grow. Publish it or not at least you won’t be copy/pasting :)

[Andrey Mikhaylov (lolmaus)]

@scottkellum You keep abusing the word "framework". :P

Thank you for an encouragement, i'll do create an assorted extension. Gonna push to Github&RubyGems because it's more convenient for personal use as well.