Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Hello Experts,

Can anyone help me with a SASS mixin and or a SASS function that takes the value from a modular scale such as (major-third, perfect-fourth, golden-section) values against my base-font-size of 16px and provide me the "em" value from that for all of my heading styles of h1,h2,h3,h4,h5,h6?

Everytime I change the modular scale value to see what I like better I have to compute them all into "ems" and then add them to my css file for all of my h1,h2,h3,h4,h5,h6 font-size values. I'm looking for a way to just plug in the modular scales value that I plan on using and use some type of equation with my base font size to have it compute all my individual h1,h2,h3,h4,h5,h6 headings for me.

Can anyone help me with a SASS mixin and or a SASS function that takes the value from a modular scale such as (major-third, perfect-fourth, golden-section) values against my base-font-size of 16px and provide me the "em" value from that for all of my heading styles of h1,h2,h3,h4,h5,h6?

Everytime I change the modular scale value to see what I like better I have to compute them all into "ems" and then add them to my css file for all of my h1,h2,h3,h4,h5,h6 font-size values. I'm looking for a way to just plug in the modular scales value that I plan on using and use some type of equation with my base font size to have it compute all my individual h1,h2,h3,h4,h5,h6 headings for me.

https://github.com/modularscale/modularscale-sass

http://thesassway.com/projects/modular-scale

Yes, I have seen both of those already. I would like to be able to create my own rather than using someone else's so that I can learn from it rather than rely on something that i didn't create. I don't need what I'm trying to create to be very detailed. Basically something that I plug the ration, base-size and how many values I would want. That's it.

how many values I would want

not sure what you mean by how many values.

here is one simple suggestion. Since the default browser font size is actually 16px, you can specify the base size as 1em.

If your intention is to learn, build on this, or read through the source of modular-scale. remember that ems are relative to the overall font size - that's what the body class is for. So if you specified your body font size to 50%, 1 em would be 8px

```
body{
font-size: 100%; // 16 px = 1em
}
// stolen from modular-scale:
$phi : 1.618034 ;
$golden : $phi ;
$double-octave : 4 ;
$major-twelfth : 3 ;
$major-eleventh : 2.666666667 ;
$major-tenth : 2.5 ;
$octave : 2 ;
$major-seventh : 1.875 ;
$minor-seventh : 1.777777778 ;
$major-sixth : 1.666666667 ;
$minor-sixth : 1.6 ;
$fifth : 1.5 ;
$augmented-fourth : 1.41421 ;
$fourth : 1.333333333 ;
$major-third : 1.25 ;
$minor-third : 1.2 ;
$major-second : 1.125 ;
$minor-second : 1.066666667 ;
$font-size-base : 1em; // ex: 14px = 14/16 em
@mixin scalar($scalar, $multiplier){
font-size: $font-size-base * $scalar * $multiplier;
}
h1{
@include scalar($golden, 2)
}
```

First of all thank you for helping me with this post!!!

I'm sorry, what I meant was I would like a mixin/function that would output the h1-h6 headings for me after proving my font-size-base and ratio that I would like to use. I tried the mixin that you supplied above on http://sassmeister.com and it seems that the output values are off compared to what they are on http://www.modularscale.co

```
body{
font-size: 100%; // 16 px = 1em
}
// stolen from modular-scale:
$phi : 1.618 ;
$golden : $phi ;
$double-octave : 4 ;
$major-twelfth : 3 ;
$major-eleventh : 2.666666667 ;
$major-tenth : 2.5 ;
$octave : 2 ;
$major-seventh : 1.875 ;
$minor-seventh : 1.777777778 ;
$major-sixth : 1.666666667 ;
$minor-sixth : 1.6 ;
$fifth : 1.5 ;
$augmented-fourth : 1.41421 ;
$fourth : 1.333333333 ;
$major-third : 1.25 ;
$minor-third : 1.2 ;
$major-second : 1.125 ;
$minor-second : 1.066666667 ;
$font-size-base : 1rem; // ex: 14px = 14/16 em
@mixin scalar($scalar, $multiplier){
font-size: $font-size-base * $scalar * $multiplier;
}
h1{
@include scalar($golden, 6)
}
h2{
@include scalar($golden, 5)
}
h3{
@include scalar($golden, 4)
}
h4{
@include scalar($golden, 3)
}
h5{
@include scalar($golden, 2)
}
h6{
@include scalar($golden, 1)
}
```

```
body {
font-size: 100%;
}
h1 {
font-size: 9.708rem;
}
h2 {
font-size: 8.09rem;
}
h3 {
font-size: 6.472rem;
}
h4 {
font-size: 4.854rem;
}
h5 {
font-size: 3.236rem;
}
h6 {
font-size: 1.618rem;
}
```

Now if you look at the h2-h6 values they are larger than what is on the http://www.modularscale.co

it's not correct to just multiply by the "multiplier". You need to multiply by the scalar "multiplier" number of times.

so in pseudo code, you would do:

font-size: $font-size-base * ( $scalar to the power of $multiplier);

have a look at :

https://github.com/modularscale/modularscale-sass/blob/2.x/stylesheets/modular-scale/_pow.scss

Ok, so how would I implement that into what you supplied me in the original mixin that you did?

in real life you would move your function to a separate file to get rid of clutter, and to be able to import it where ever else you need

if you are using compass, there is a pow function built in.

Yes, that seems a lot better :) Is there a way on top of what you did to round those values up to whole numbers or to round them up to the values that modular scale outputs to, rather than having the long decimal values?

Also, is there a way to just implement what you did in your mixin in pseudo code rather than use the "pow" function?

Thank you very much Kyle for your input, patience and hard work on trying to help me with this issue!!!!

to round, you can do:

round up:

```
font-size: ceil($font-size-base * pow($scalar, $multiplier));
```

round down:

```
font-size: floor($font-size-base * pow($scalar, $multiplier));
```

round

```
font-size: round($font-size-base * pow($scalar, $multiplier));
```

the pseudo code just says "use a power function here". So the answer is no, not really. Unless you are using compass, there is no power function out of the box, so you have to write one. but like I said, you should move it out to a separate file so it's not "in the way" so to speak.

Also, have a look here for a SCSS implementation of toFixed() - this will give you a number with the specified number of decimal places - as well as an alternative pow function.

https://css-tricks.com/snippets/sass/fix-number-n-digits/

You are a God send!! Thank you very much!!! :)

I took your advice and looked at CSS-Tricks and I think I may use that one instead.

Only, one more question, I PROMISE :)

So, the next question is how do I get the values below 1em using the mixin that you provided with the ratio? Just like in Modularscale how they have values starting at 0.0xxxx?

you would provide a negative exponent:

@include scalar($golden, -2)

cheers.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Open in new window