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

Question

我检查了以下article，并提出以下混合：

具有像素后退的rem字体大小

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

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

在将font-size: 62.5%放置在html上之后，在1rem = 10pixels上放置了rem，我在项目上使用rem感到非常舒适。

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

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

在这种情况下，margin-right = 5像素，宽度32像素。雷姆单元的问题是不支持IE8，Opera mini或Safari 3.2。因此，从任何这些浏览器中都无法正确看到该站点。

是否有一种方法可以在整个项目中使用rem自动执行像素后退？

Answer 1

这里是一个解决方案，因此您可以对任何属性使用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);
}

输出

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

Answer 2

此解决方案将使用包含混合值的快捷方式属性。

// Global Var
$root-font-size: 16;

@mixin rem($property, $values) {
  $pxvalues: null;
  $remvalues: null;

  @each $value in $values{
    $pxvalue: null;
    $remvalue: null;
    @if type-of($value) == 'number'{
      @if $value > 0{
        $pxvalue: ($value)+px;
        $remvalue: ($value / $root-font-size)+rem;
      } @else {
        $pxvalue: $value;
        $remvalue: $value;
      }
    } @else {
      $pxvalue: $value;
      $remvalue: $value;
    }

    $pxvalues: append($pxvalues, $pxvalue);
    $remvalues: append($remvalues, $remvalue);

  }

  #{$property}: $pxvalues;
  #{$property}: $remvalues;
}

// Usage: pass pixel values without units
.foo{
  @include rem(margin, 80 auto);
}

输出：

.foo{
  margin: 80px auto;
  margin: 5rem auto;
}