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的第一个代码ist总是无效的：

这是我想到的一点。那么视网膜模式除以2的计算效果不好吗？

Answer 1

创建功能

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

创建mixin

接下来我们创建一个调用函数的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

我使用从 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;

如何在sass中正确计算rem？

3 个答案: