How to add a PX fallback to Zurb Foundation 4 REM function?

Question

I am using this SCSS function from Zurb Foundation 4 framework:

@function remCalc($pxWidth) {
  @return $pxWidth / $em-base * 1rem;
}

it returns a REM value only, so it does not work with IE8. Is it possible to add a PX fallback to support IE8? I am not familiar in coding SASS functions.

score 3 · Answer 1 · answered Jun 23 '13 at 01:37

3

@mixin font-size($pxWidth){
  font-size:$pxWidth;
  font-size:remCalc($pxWidth);
}
.yourclass {
  @include font-size(16px); //outputs font-size:16px; font-size:1rem;
}

answered Jun 23 '13 at 01:37

Tim Shedor

165
1
7

score 1 · Answer 2 · answered Apr 11 '13 at 21:14

as stated in the Foundation 4 Docs ie8 is not supported, see their extended article full a full explanation of why they do not support it any more.

If you are looking for IE8 support they recommend reverting back to Foundation 3.2

http://foundation.zurb.com/docs/faq.html

score 0 · Answer 3 · answered Apr 10 '13 at 07:19

0

The best solution is to use a polyfill to enable rem support in IE8 and older.

I'm not sure which one, unfortunately. Try html5shim and IE9.js for starters.

The function in question is a function, no a mixin. So it can't provide fallbacks. Consider writing your own mixin for that purpose. You can use some hacks to make a line of CSS work only for IE.

answered Apr 10 '13 at 07:19

Andrey Mikhaylov - lolmaus

23,107
6
84
133

i want to avoid a polyfill or conditional loading of another stylesheet... i thought i can integrate the px fallback solution snook.ca html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ into the function...now i know it has to be a mixin – sdasd asdasda Apr 11 '13 at 21:37

How to add a PX fallback to Zurb Foundation 4 REM function?

3 Answers3