Mixiny pro velikost písma Rem - Triky CSS

Jednotka remvelikosti písma je podobná em, pouze místo kaskádování je vždy relativní ke kořenovému (html) prvku (více informací). To má docela dobrou podporu moderních prohlížečů, je to jen IE 8 a dolů musíme poskytnout pxzáložní řešení.

Místo toho, abychom se všude opakovali, můžeme použít MÉNĚ nebo SASS mixiny, abychom udrželi čistotu. Tyto mixiny předpokládají:

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

Používání

p ( .font-size(13); )

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

(Díky Gabe Luethje)

Další SCSS s jiným přístupem od Karla Merkliho:

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

Můžete tedy udělat:

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

a dostat:

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