Mixini za velikost črk Rem - CSS-triki

Enota remvelikosti pisave je podobna em, le da je namesto kaskadne vedno odvisna od korenskega (html) elementa (več informacij). Ta ima precej dobro sodobno podporo za brskalnike, to je samo IE 8 in pxstarejši, za katere moramo zagotoviti nadomestne rešitve.

Namesto da se povsod ponavljamo, lahko za čiščenje uporabimo manj ali manj mešanic. Ti mešanci predpostavljajo:

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

Uporaba

p ( .font-size(13); )

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

(Hvala Gabe Luethje)

Še ena SCSS z drugačnim pristopom Karla Merklija:

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

Tako lahko storite:

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

in dobite:

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