Underscores font-size mixin
问题描述:
我使用的是wordpress的underscores starter theme。Underscores font-size mixin
他们有这样的mixin我已经不知道它要怎样做。
// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
font-size: ($sizeValue * 16) * 1px;
font-size: $sizeValue * 1rem;
}
有人可以解释这背后的数学吗?
如果我在px中给出字体大小,我该如何使用它?
答
它只是与像素回退(“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;
}
答
嘿,这比需要更多的抽象。这是工作的一点点地换出,但是这是我使用的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;
}