为什么CSS calc()函数不起作用? [英] Why the CSS calc() function is not working?

问题描述

为什么这个calc(100vw/4)起作用，但以下两个都不起作用?

Why this one calc(100vw/4) works but neither of the following do?

1. calc(100vw/4-(10-4))
2. calc(100vw/4-(10px-4))
3. calc(100vw/4-(10px-4px))
4. calc(100vw/4-calc(10px-4px))

1. calc(100vw/4-(10-4))
2. calc(100vw/4-(10px-4))
3. calc(100vw/4-(10px-4px))
4. calc(100vw/4-calc(10px-4px))

我该如何管理表达式calc(100vw/x-(10px-x))，其中的x在SASS循环中被替换?

How do I manage the the expression calc(100vw/x-(10px-x)) where x gets replaced in a SASS loop to work?

推荐答案

您需要在运算符之间添加空格，这是忘记它们的常见错误.我们也可以根据需要使用calc进行嵌套操作，但它们等同于简单的括号.

You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses.

从文档:

注意:+和-运算符必须被空白包围.为了 例如，calc(50% -8px)将被解析为一个百分比，后跟一个 负长度(无效表达式)，而calc(50% - 8px)是 百分比，后跟一个减法运算符和一个长度.同样地， calc(8px + -50%)视为长度，后加 运算符和一个负百分比.

Note: The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length—an invalid expression—while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

*和/运算符不需要空格，但是将其添加为 一致性是允许的，也是推荐的.

The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

注意:允许嵌套calc()函数，在这种情况下， 内部的圆被当作简单的括号.

Note: It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

这篇关于为什么CSS calc()函数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！