CSS 计算 - 嵌套

Question

我想做一个简单的嵌套计算：从一个数字（两个像素值）中减去另一个数字，然后将结果乘以 2。这对我不起作用：

.sample {
     width: calc(2 * (410-300)px);
}

结果将是像素宽度。

感谢任何帮助。谢谢

Answer 1

calc 要求 +/- 运算符始终间隔开。此外，我需要在减去的整数上添加单位。

.sample {
  width: calc(2 * (410px - 300px));
}

一个替代方案（稍长但添加的单位较少），一位评论者巧妙地指出：

.sample {
  width: calc(2 * (410 - 300) * 1px);
}

通过Mozilla Developer Network：

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

.el {
  background: red;
  display: inline-block;
  width: calc(2 * (410px - 300px));  
  height: 50px;
}

<div class="el"></div>

CSS 计算 - 嵌套

CSS calc - with nest

css

calc