Css 下划线字体大小混合

我用的是wordpress

他们有这个，我不知道它想做什么

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

有人能解释一下这背后的原因吗？

---

如果在px中指定字体大小，我如何使用它？

它只在

rem

中输出字体大小，并使用像素回退（“16”是这里的基本字体大小）。 如果使用

@include font size（1.2）

，它将输出：

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

此混合不适合将字体大小（以像素为单位）转换为rem。
如果您希望以像素为单位编写代码，并将其转换为rem，则mixin应该如下所示：

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

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

然后使用它：

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

哪些输出到：

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

---

它只在

rem

中输出字体大小，并有像素回退（“16”是这里的基本字体大小）。 如果使用

@include font size（1.2）

，它将输出：

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

此混合不适合将字体大小（以像素为单位）转换为rem。
如果您希望以像素为单位编写代码，并将其转换为rem，则mixin应该如下所示：

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

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

然后使用它：

.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;
}

然后我就这样使用它：

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

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

哪些产出：

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

---

天哪，这比需要的抽象多了一点。换掉它需要一点工作，但这是我使用的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;
}

然后我就这样使用它：

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

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

哪些产出：

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