使用LESS变量的IE8 REM回退

Question

I need a REM fallback for IE8, there are a ton of mixins that solve this problem by calculating the px equivalent and putting it above the REM style as a fallback, but my REMS are declared as part of a variable and so I don't think this could work.

I have tried the polyfill from Chuck Carpenter, for some reason it is not working with my compiled stylesheet.

One other thing I thought of would be to use a conditional stylesheet with em's instead of rems for IE8, but this would need updating and converting every time the normal stylesheet had any changes made so I don't think its manually feasible.

Another might be to use some sort of conditional method to declare the variables as pixels just for IE8, but I don't think this is supported in LESS.

Here is where my REMs are declared:

@size-gnt: 4.5rem;               /* 72px /16 */
@size-spr: 3rem;                   /* 48px /16 */
@size-big: 2.25rem;             /* 36px /16 */
@size-lrg: 1.75rem;             /* 28px /16 */
@size-med: 1.25rem;        /* 20px /16 */
@size-nml: 1rem;               /* 16px /16 */
@size-sml: 0.6875rem;    /* 11px /16 */
@size-tny: 0.5rem;            /* 8px  /16 */
@baseline: 1.4375rem;    /* 23px /16 */
@1px:      0.0625rem;         /*  1px /16 */

This is an example of when I use them:

.spc-pad              {padding: @baseline}  

The polyfill I mentioned: https://github.com/chuckcarpenter/REM-unit-polyfill

Answer 1

For a pure CSS/Less solution I guess the most compact method would be to declare all those variables using some "base unit" and then change this base unit (with any suitable method) when compiling IE8 stylesheet, eg:

@u: 1rem;

@size-gnt: 4.5  * @u;
@size-spr: 3    * @u;
@size-big: 2.25 * @u;
@size-lrg: 1.75 * @u;
// etc.

// then for IE8 just override it with
@u: 16px;

Then for example one way to create that IE8 stylesheet would be to only compile a file like:

@import "your-main-stylesheet.less";
@u: 16px;

That's it.