如何在 sass 中正确计算 rem？

Question

我们是第一次开发应用程序，设计师已经在 retina modus 中对布局进行了原型设计，虽然这不是我们下一个版本的目标，那么现在我们要做的就是得到他提供的值并除以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的计算不好？

Answer 1

创建函数

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

创建混音

接下来我们创建一个调用函数的mixin：

@mixin fontSize($size) {
  font-size: $size; //Fallback in px
  font-size: calculateRem($size);
}

萨斯

h1 {
  @include fontSize(32px);
}

检查这个article

Answer 2

问题是你没有做除法，你在 CSS 中得到了值 0.0625rem / 2 这不是有效的 CSS，你必须放在括号中才能得到正确的值：

SCSS

label {
  font-family: arial;
  color:red;
  font-size: (2.25rem / 2);
  letter-spacing: (0.0625rem / 2);
  line-height: (3.25rem / 2);
  white-space: normal;
}

输出 CSS

label {
  font-family: arial;
  color: red;
  font-size: 1.125rem;
  letter-spacing: 0.03125rem;
  line-height: 1.625rem;
  white-space: normal;
}

当你使用calc()时，CSS可以自己做除法。

Answer 3

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

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