用于Rem字体大小调整的Mixins

rem font-size单位类似于em ，只是不是级联而是始终相对于root（html）元素（ 更多信息 ）。 这具有很好的现代浏览器支持，仅是IE 8，我们需要为其提供px后备。

不必在各处重复说明，我们可以使用LESS或SASS mixins使其保持干净。 这些mixins假定：

html {
  font-size: 62.5%; /* Sets up the Base 10 stuff */
}

.font-size(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px"; 
  font-size: ~"@{remValue}rem";
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

用法

p {
  .font-size(13);
}

p {
  @include font-size(13);
}

（感谢Gabe Luethje ）

---

卡尔·默克利（Karl Merkli）提出的另一种采用不同方法的SCSS：

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 
  
  #{$property}: $pxValues; 
  #{$property}: $remValues; 
}

因此，您可以执行以下操作：

@include rem-fallback(margin, 10, 20, 30, 40);

并获得：

body {
  margin: 160px 320px 480px 640px;
  margin: 10rem 20rem 30rem 40rem; 
}

翻译自: https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/