css3 - Automate pixel fallback using REM units throughout a project -

i checked following article in presented following mixing:

rem font size pixel fallback

@function calculaterem($size) {   $remsize: $size / 16px;   @return $remsize * 1rem; }  @mixin font-size($size) {   font-size: $size;   font-size: calculaterem($size); } 

i feel confortable using rem on projects, after placing font-size: 62.5% on html 1rem = 10pixels.

but know if there mixing or method create pixel fallback rem used in whole project, example:

&:before{     color: white;     margin: 0 0.5rem 0 0;     left: 0;     text-align: center;     top: 0;     width: 3.2rem; } 

in case margin-right = 5pixels , width 32pixels. issue rem units ie8, opera mini or safari 3.2 not supported. site not correctly visible of these browsers.

is there way automate pixel fallback using rem throughout project?

here solution can use rem px mixin property:

html {   font-size: 62.5%; }  @function calculaterem($size) {   $remsize: $size / 10px;   @return #{$remsize}rem; }  @mixin rem($propertie, $value) {   #{$propertie}: $value;   #{$propertie}: calculaterem($value); }  p {   font-size: calculaterem(32px);   @include rem(width, 100px);   @include rem(margin, 50px); } 

output

html {   font-size: 62.5%; }  p {   font-size: 3.2rem;   width: 100px; /* fallback */   width: 10rem;   margin: 50px; /* fallback */   margin: 5rem; } 

an example: http://sassmeister.com/gist/e888e641925002b5895c