Css 如何正确计算sass中的rem？

我们是第一次开发一个应用程序，设计师已经在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的计算是不好的，我想？

创建函数

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

创建mixin

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

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

无礼

选中此项创建函数

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

创建mixin

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

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

无礼

---

检查此项

问题是您没有进行除法，您在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;
}

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

输出CSS

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

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

---

当您使用

calc（）

CSS时，它可以自己进行除法。

问题是您没有进行除法，您在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;
}

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

输出CSS

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

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

---

当您使用

calc（）

CSS可以自己进行除法。

您说得对！无论如何，标题应该是如何正确计算sass。与rems、px、vh无关……你说得对！无论如何，标题应该是如何正确计算sass。与rems、px、vh无关……我如何让它接受多个值，如

calculateRem（20px、30px、50px）

？每当我添加多个值时，函数都会正确返回值，但如下所示：

padding:2rem4rem1rem/calculateRem（）函数的作用是什么？为什么不直接编写类似于
font-size:1.2rem
的内容而不使用函数呢？它允许对$size参数使用px而不是rem。如何让它接受多个值，如
calculateRem（20px，30px，50px）
？每当我添加多个值时，函数都会正确返回值，但如下所示：
padding:2rem4rem1rem/calculateRem（）函数的作用是什么？为什么不直接编写类似于
font-size:1.2rem
的代码而不使用函数呢？它允许对$size参数使用px而不是rem。