Mixins für Rem Font Sizing - CSS-Tricks

Anonim

Die remSchriftgrößeneinheit ist ähnlich em, nur dass sie nicht kaskadiert, sondern immer relativ zum Stammelement (HTML) ist (weitere Informationen). Dies hat eine ziemlich gute Unterstützung für moderne Browser. Es ist nur IE 8 und pxniedriger, für die wir Fallbacks bereitstellen müssen .

Anstatt uns überall zu wiederholen, können wir WENIGER- oder SASS-Mixins verwenden, um es sauber zu halten. Diese Mixins setzen voraus:

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

So können Sie tun:

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

und bekomme:

body ( margin: 160px 320px 480px 640px; margin: 10rem 20rem 30rem 40rem; )