Mixins für Rem-Schriftgrößen

Die Schriftgrößen-Einheit rem ähnelt em, nur dass sie anstatt zu kaskadieren immer relativ zum Root (html)-Element ist (weitere Informationen). Dies wird von modernen Browsern recht gut unterstützt, nur für IE 8 und älter müssen wir px-Fallbacks bereitstellen.

Anstatt uns überall zu wiederholen, können wir LESS- oder SASS-Mixins verwenden, um es sauber zu halten. Diese Mixins gehen davon aus,

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

Verwendung

p {
  .font-size(13);
}

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

(Danke Gabe Luethje)

Ein weiteres SCSS-Beispiel mit einem anderen Ansatz von Karl Merkli

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

Man kann also machen

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

und erhält

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