Use with modular scale

[anthonykasabian]

hy my friend and thanks to this great plugin. Now my question. I#m using modular scale and would like to assign base font scale in this way:

base-font-scale: ((ms(6), ms(5), ms(4), ms(3), ms(2), ms(1))

but it's not working

messageOriginal: cannot compare numbers with incompatible units relativePath: FeSource/Vendor/shevy/core/shevy/_mixins.scss

[kyleshevlin]

So looking into the modularscale library, it seems that the output of the ms() function is a pixel value, whereas base-font-scale should strictly be unitless values. Shevy calculates font sizes by multiplying the base-font-size by the current base-font-scale value. Since the base-font-value should have a unit (px, em, or rem), the base-font-scale value needs to be unitless, otherwise you get a px*px (or some other combination of units) error.

In this particular case, it also seems that you have set the base-font-size in one unit type, and ms() is outputting in a different value type, resulting in an inability for Shevy to check if one size is larger than the other. In order to set the line-height, it runs a loop checking font-size against increments of the base-spacing value until it reaches a line-height greater or equal to the font-size, while still on the base scale.

If you want to try and use ms() for scale, then you will need to do some math in order to remove the unit. If you know the output of ms() is in px, then you could do base-font-scale like this:

base-font-scale: ( (ms(6) / 1px, ms(5) / 1px, ms(4) / 1px, ms(3) / 1px, ms(2) / 1px, ms(1) / 1px );

Based on this, I think it might be prudent that I add a check for a unitless number in the base-font-scale and perhaps add a function to strip the unit from the provided value.

Lastly, there is a small typo in your map declaration. You have an extra parentheses on the left.

[anthonykasabian]

Problem is when i use the ms function the font-sizes are going way to big :( some sort of implementing modular scale would be great =)

[kyleshevlin]

At this time, I don't think creating an integration is worthwhile. Shevy is a baseline rhythm tool, not a typographical scale tool. It requires the dev/designer to already have a scale, and only provides defaults because the tool needs them, not because they are the recommended settings or the mathematically most pleasing settings.

As for being too big, I looked further into how to use modular-scale. If you want to implement this into Shevy on your own, here is how:

First, set your modular-scale variables:

$ms-base: 1em;
$ms-ratio: $golden;

Next, set Shevy's base-font-size to $ms-base:

$shevy: (
  base-font-size: $ms-base
);

Now, modular-scale expects the base size to be ms(0), and Shevy's base-font-scale requires a unitless value. It is a scale, not a list of font-sizes, this is an important distinction. An easy way to do this is to create your own function to remove the unit from the ms() output, and put those values in the scale. Like so:

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

// Alias for terser syntax
@function su($number) {
  @return strip-unit($number);
}

$shevy: (
  base-font-size: $ms-base,
  base-font-scale: ( su(ms(5)), su(ms(4)), su(ms(3)), su(ms(2)), su(ms(1)), su(ms(0)) )
);

Now, you should have a unitless scale equivalent to the modular-scale created by your $ms-base and your $ms-ratio. If the sizes are not to your liking, adjust the $ms-ratio until they are. After that, all that's left for you is to determine the base-line-height of your Shevy configuration. In the end, you might have something like this:

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

// Alias for terser syntax
@function su($number) {
  @return strip-unit($number);
}

// Modular Scale Variables
$ms-base: 1em;
$ms-ratio: $golden;

// Shevy Map
$shevy: (
  base-font-size: $ms-base,
  base-font-scale: ( su(ms(5)), su(ms(4)), su(ms(3)), su(ms(2)), su(ms(1)), su(ms(0)) ),
  base-line-height: 1.5
);

@include headings;
@include body;
@include content;

Hope that is a satisfactory answer.