Underscores font-size mixin

Question

我使用的是wordpress的underscores starter theme。

他们有这样的mixin我已经不知道它要怎样做。

// Rem output with px fallback 
@mixin font-size($sizeValue: 1) { 
    font-size: ($sizeValue * 16) * 1px; 
    font-size: $sizeValue * 1rem; 
} 

有人可以解释这背后的数学吗？
如果我在px中给出字体大小，我该如何使用它？

Answer 1

它只是与像素回退（“16”是在这里基本字体大小）输出的字体大小在rem。 如果使用@include font-size(1.2)，它将输出：

font-size: 19.2px; // fallback for those with no rem support 
font-size: 1.2rem; 

这混入不适合以像素为单位将字体大小REM。
如果你想要写在像素代码并将它们转化为物权，则混入应该是这个样子：

@mixin font-size-px-to-rem($value: 12) { 
    font-size: $value * 1px; 
    font-size: $value/16 * 1rem; 
} 

然后使用它：

.test { 
    @include font-size-px-to-rem(14); 
} 

其输出到：

.test { 
    font-size: 14px; 
    font-size: 0.875rem; 
} 

Answer 2

嘿，这比需要更多的抽象。这是工作的一点点地换出，但是这是我使用的mixin：

$base-font-size: 16; 

@mixin font-size-rems($target-px-size) { 
    $rem-size: $target-px-size/$base-font-size; 
    font-size: $target-px-size * 1px; 
    font-size: $rem-size * 1rem; 
} 

然后我用这样的：

.example { 
    @include font-size-rems(24); 
} 

，输出：

.example { 
    font-size: 24px; 
    font-size: 1.5rem; 
}