CODEWITHSUNDEEP
csssasszurb-foundation
MTT
MTT

Reputation: 318

Does Zurb Foundation return accurate rems using rem_calc()? Output seems off

Does Zurb Foundation 5.2.3 return accurate rems using rem_calc()?

Using a base of 12px, Foundation's rem calculating function rem_calc() says that a font size of 148px should equal 9.25rem ... rem_calc(148) = 9.25rem;. The output is visually smaller than what Photoshop says should be 148px.

Pluging in the base font size and size to be calculated in Rem Calculator outputs 148px = 12.33rem. Manually defining a font size of 12.33rem matches Photoshop.

Where does the difference come from in Foundation? Am I using this function wrong?

Edit:
I am not using the wrong REM base, or if I am it's becuase foundation is not looking for it properly. As defined in very top of Foundation Settings.scss, before @import "foundation/functions"; is called...

 $base-font-size: 12px;
 $rem-base: $base-font-size;

Upvotes: 1

Views: 436

Answers (2)

MTT
MTT

Reputation: 318

The answer to this question is that in Foundation 5.2.3 $rem-base must have a defined font pixel size, simply declaring $rem-base: $base-font-size; is not enough.

Upvotes: 0

JAre
JAre

Reputation: 4756

You are using wrong base:

// $rem-base: 16px; // default base
@debug rem-calc(148); //2.25rem

$rem-base: 12px;
@debug rem-calc(148); //12.33333rem

@debug rem-calc(148, 16);// again 2.25rem with the 16 base

Upvotes: 1

Related Questions