search

mhulse / rex

On, Wildfire, on!
http://mhulse.github.io/rex/demo/
Apache License 2.0
4 stars 0 forks source link

Make scss font size relative to base #93

Closed mhulse closed 11 years ago

mhulse commented 11 years ago

Currently:

address {
    font-size: #{relative(18)}rem;
}

And:

$base_font-size: 16px;

... Which produces:

address {
    font-size: 1.125rem;
}

The problem:

If someone changes $base_font-size, well, it's probably more likely that the font-size of the address should be relative to the base, and not 16px of the new base.

In other words, should the address (for example) look like:

address {
    font-size: #{relative($base_font-size + 2)}rem; // 16px + 2px = 18px
}

So that any elements font size is relative, up or down in pixels, to the chosen base font size?

Will have to circle back around to this.

mhulse commented 11 years ago

I played around with this idea ... In the end, it did not seem to help, as even a "relative to baseline" font-size calculation wasn't a perfect fit when going up/down in size (for either font-size or line-height). I think most people will be cool with 100%/16px/24px setup. If not, they can change via SCSS vars and then override font-size/baseline values from another stylesheet.