如何在 sass 中正确计算 rem？

Question

我们是第一次开发应用程序，设计师已经在 视网膜模式 中对布局进行了原型设计，虽然这不是我们下一个版本的目标，那么现在我们要做的就是得到他提供的值并除以2.

例如，我们有一个显示文本的标签，该标签具有以下内容 scss ：

         label {
            font-family: $font-family-medium;
            color: color($colors, slate);
            font-size: 2.25rem / 2;
            letter-spacing: 0.0625rem / 2;
            line-height: 3.25rem / 2;
            white-space: normal;
        }

这就是结果：

这看起来不错，但取决于我在哪里应用代码 chrome 告诉 css 属性无效。好的，那么我在上面的代码中添加函数 calc ：

         label {
            font-family: $font-family-medium;
            color: color($colors, slate);
            font-size: calc(2.25rem / 2);
            letter-spacing: calc(0.0625rem / 2);
            line-height: calc(3.25rem / 2);
            white-space: normal;
        }

所以 chrome 停止抱怨，但这就是结果：

标签中的文本变小了。

在 sass 中使用 calc 和不使用 calc 有什么区别？

我想我错过了一些重要的布局/设计概念？

更新：

我刚刚意识到 chrome 的第一个代码总是无效的：

这是我想通的一点。所以我猜视网膜模式除以2的计算不好？

原文由 DAG 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用从 Foundation 借来的 rem-calc 函数：

 $rem-base: 16px;

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

因此，您可以像这样使用它，例如：

margin: rem-calc(24 0); // output: margin: 1.5rem 0;

原文由 Loosie94 发布，翻译遵循 CC BY-SA 4.0 许可协议