在整个项目中使用 REM 单位自动进行像素回退

我检查了以下内容article http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/其中提出了以下混合：

rem 字体大小与像素回退

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

在放置后，我在我的项目中使用 rem 感到非常舒服font-size: 62.5%在html上所以1rem = 10pixels.

但我想知道是否有混合或方法可以为整个项目中使用的任何 rem 创建像素回退，例如：

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

在本例中，右边距 = 5 像素，宽度 32 像素。 rem 单位的问题是不支持 IE8、Opera mini 或 Safari 3.2。因此，从任何这些浏览器中都无法正确看到该网站。

有没有办法在整个项目中使用 rem 自动执行像素回退？

这是一个解决方案，因此您可以对任何属性使用 rem 到 px mixin：

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;
}

一个例子：http://sassmeister.com/gist/e888e641925002b5895c http://sassmeister.com/gist/e888e641925002b5895c