CSS calc - 带嵌套

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:

+ 和 - 运算符必须始终被空格包围。例如 calc(50% -8px) 的操作数将被解析为百分比后跟负长度，无效表达式，而 calc(50% - 8px) 的操作数是百分比后跟减号和长度.更进一步， calc(8px + -50%) 被视为一个长度，后跟一个加号和一个负百分比。 * 和 / 运算符不需要空格，但为了保持一致性允许并建议添加空格。

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

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