在sass中如何正确地计算对物？

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

所以铬不再抱怨了，但结果是：

​

​

标签中的文本变得越来越小。

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

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

更新：

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

​

​

这是我想出来的一点。所以视网膜除以2的计算方法不是很好，我想？

Answer 1

创建函数

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

创建混合器

接下来，我们创建一个混合体，它调用函数：

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

沙斯

h1 {
  @include fontSize(32px);
}

检查这个文章

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函数：

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