CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译。
CSS有一个特殊的calc()函数，用于做基本的数学运算。下面是一个例子：
代码语言：javascript复制.main-content {
/* Subtract 80px from 100vh */
height: calc(100vh - 80px);
}在本指南中，让我们来介绍一下关于这个非常有用的功能所需要了解的一切。
calc() 只作用于属性值
你唯一可以使用calc()函数的地方是在值中。请看这些例子，我们在这些例子中设置了一些不同属性的值。
代码语言：javascript复制.el {
font-size: calc(3vw 2px);
width: calc(100% - 20px);
height: calc(100vh - 20px);
padding: calc(1vw 5px);
}它也可以仅用于部分属性，例如：
代码语言：javascript复制.el {
margin: 10px calc(2vw 5px);
border-radius: 15px calc(15px / 3) 4px 2px;
transition: transform calc(1s - 120ms);
}它甚至可以成为构成属性一部分的另一个功能的一部分！例如，这里的calc() 用于渐变的色标中
代码语言：javascript复制.el {
background: #1E88E5 linear-gradient(
to bottom,
#1E88E5,
#1E88E5 calc(50% - 10px),
#3949AB calc(50% 10px),
#3949AB
);
}calc() 用于长度和其他数值
请注意，以上所有示例本质上都是基于数字的。我们会讲到一些数的使用注意事项（因为有时你不需要单位），但这是针对数字的数学，而不是字符串之类的东西。
代码语言：javascript复制.el {
/* Nope! */
counter-reset: calc("My " "counter");
}
.el::before {
/* Nope! */
content: calc("Candyman " * 3);
}CSS有很多长度，它们都可以与calc() 一起使用：
- px
- %
- em
- rem
- in
- mm
- cm
- pt
- pc
- ex
- ch
- vh
- vw
- vmin
- vmax
无单位的数字也是可以接受的，例如line-height：calc（1.2 * 1.2）; 以及诸如transform：rotate（calc（10deg * 5））;之类的角度。
您也可以不执行任何计算并且仍然有效：
代码语言：javascript复制.el {
/* Little weird but OK */
width: calc(20px);
}不能在媒体查询中使用
当正确使用calc()时（长度单位作为属性的值），可悲的是，当应用于媒体查询时，calc()将无法工作。
代码语言：javascript复制@media (max-width: 40rem) {
/* Narrower or exactly 40rem */
}
/* Nope! */
@media (min-width: calc(40rem 1px)) {
/* Wider than 40rem */
}有一天，这将是很酷的，因为你可以用一种相当合理的方式（如上）进行相互排斥的媒体查询。
混合单位
这也许是calc()最有价值的功能! 几乎上面的每一个例子都已经做到了这一点，但只是为了强调一下，这里是将不同的单位混合在一起。
代码语言：javascript复制/* Percentage units being mixed with pixel units */
width: calc(100% - 20px);这是说。 元素的宽度，减去20个像素就可以了。
在流体宽度的情况下，完全没有办法单独用像素来预计算这个值。换句话说，你不能用Sass这样的东西来预处理calc()，因为它是一个试图完成的polyfill。不是说你需要这样做，因为浏览器的支持很好。但问题是，当你用这种方式混合单位时，必须在浏览器中完成（在 "运行时"），这也是calc()的大部分值。
下面是其他一些混合单位的例子。
代码语言：javascript复制transform: rotate(calc(1turn 45deg));
animation-delay: calc(1s 15ms);这些可能会被预处理，因为它们混合了与运行时确定的任何单位都不相关的单位。
与预处理器数学比较
我们刚刚介绍了您无法预处理calc（）可以执行的最有用的操作。但是有一点重叠。例如，Sass内置了数学功能，因此您可以执行以下操作：
代码语言：javascript复制$padding: 1rem;
.el[data-padding="extra"] {
padding: $padding 2rem; // processes to 3rem;
margin-bottom: $padding * 2; // processes to 2rem;
}甚至带有单位的数学也可以在这里工作，将相同单位的值相加或乘以无单位数。但是您不能混合使用单位，并且它与calc（）有类似的限制（例如，乘和除必须使用无单位的数字）。
原文：https://css-tricks.com/a-complete-guide-to-calc-in-css/
翻译未完待续。
