如何在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停止抱怨,但结果是:

标签中的文字变得越来越小.

使用calc和不使用calcsass有什么区别？

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

更新:

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

这是我想出的一点.那么视网膜模式除以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);
}

看看这篇文章

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时可以自己进行划分.