当大多数人想到在 Web 上进行计算时，他们会想到 JavaScript。考虑到 JavaScript 是 Web 的主要编程语言，这是有道理的，但是如果我告诉你，你可以只用 CSS 进行相当复杂的计算。老实说，它非常神奇且无限有用。
什么是 CSS 计算？
首先，我们需要谈谈 CSS calc 是什么以及如何使用它。用最简单的术语来说，CSS calc 只是一个 CSS 函数，类似于rgb,var等，它可以让您对各种 CSS 单元进行加法、减法、除法和乘法运算。这是一个简单的例子。
.class {
width: calc(200px + 100px);
}
上面的 CSS 将这个框的宽度设置为 300px（200px 加上 100px）。
诚然，这不是很有用。我的意思是我们可以只写 300px 并节省大量时间，但这只是 CSS calc 的开始。
组合不同的单位
使用 CSS calc，我们可以将不同的 CSS 单元组合在一起，以创建传统 CSS 单元无法表示的值。例如，如果我们想创建一个距离 100vw 宽 30px 的盒子怎么办。本质上是一个 100vw 的盒子，其中移除了 30px 的空间。
.class {
width: calc(100vw - 30px);
}
这就是你需要做的。只需将 100vw 和 30px 放入您的 calc 函数中，CSS 就会为您处理所有复杂的数学运算。现在，无论您的屏幕多宽或多小，框总是比屏幕的全宽小 30 像素。现在，仅此一项就足以使 CSS calc 令人惊叹，但是您可以更进一步，将其与 CSS 变量结合使用。
CSS 变量和计算
现在，我们可以讨论如何在 calc 中使用 CSS 变量。您需要做的就是用变量替换 calc 函数中的一个值。例如：
.class {
--w: 100px;
width: calc(var(--w) * 2);
}
我们现在有一个 200px 宽的盒子，因为我们将 100px--w变量乘以 2。那--w是什么呢？那在这里也说一下css的自定义属性。
自定义属性的由来
在很长一段时间内，原生 CSS 在代码复用方面有所欠缺，例如典型的例子 - 主题，每一个 font-size、color、border 等属性值必须重复编写，若有改动则每一处都要修改。如何解决这个疑难杂症，许多开发人员转向 CSS 预处理器（例如 SASS、Less）来处理 CSS 中的变量。在过去的几年里，CSS 一直忙于添加新特性，其中一个特性就是自定义属性。这些自定义属性是 CSS 的变量版本，比任何预处理器变量都强大得多。
自定义属性(变量)
属性名能够自定义，属性值是任意合法 CSS 值。属性名以 -- 开头，大小写敏感，如 --auto-color: red，通过 var(--auto-color defaultValue) 引用
body {
--auto-color: red
}
child {
width: var(--auto-color, black)
}
默认会被继承，所以定义在 :root 伪类下，则所有子元素都可以获取到。
若自定义属性不合法或不存在，会被该属性的默认值替换，例如:
child {
width: var(--auto-color1,red) //block
}
自定义属性默认值
由于自定义属性是 CSS 的一部分，而不是像在预处理器中那样从代码中编译出来，因此可以在 JavaScript 中访问和修改它们。让我们使用下面的 CSS 来演示如何在 JavaScript 中访问和修改自定义属性。
:root {
--color: red;
}
.custom-btn {
--background-color: blue;
color: var(--color);
background-color: var(--background-color);
}
我们在两个元素上都设置了自定义属性，.custom-btn类以及文档根，在 Web 开发的情况下是 html 元素。我们该如何在 JavaScript 中获取这些属性的值呢？请看下面例子：
/* 这个将从根元素返回变量color值 */
getComputedStyle(document.documentElement).getPropertyValue('--color')
const customButton = document.querySelector('.custom-btn')
getComputedStyle(customButton).getPropertyValue('--color')
getComputedStyle(customButton).getPropertyValue('--background-color')
代码首先获取元素的计算样式。这将确保--color正确计算所有继承的值，例如自定义按钮的值。然后该getPropertyValue函数用于获取属性的值，就好像它是任何其他 CSS 属性一样。
至于设置自定义属性的值，则更加简单。
document.documentElement.style.setProperty('--color', 'green')
const customButton = document.querySelector('.custom-btn')
customButton.style.setProperty('--background-color', 'yellow')
设置自定义属性就像设置任何其他 CSS 属性一样。首先需要访问元素的样式，然后setProperty可以通过传递要设置的属性名称和要设置的值来使用该函数。那我们回过头来说calc。
用 Calc 转换单位
除了在 calc 中使用 CSS 变量之外，您还可以将没有单位的值转换为有单位的值，只需将该值乘以您要转换为的单位类型的 1。如果您在 JS 中设置了不包含单位的 CSS 变量，这将非常有用。
.class {
--fav-num: 3;
width: calc(var(--fav-num) * 1px);
}
使用这个简单的计算函数，我将--fav-num变量从无单位值转换为基于像素的值。
CSS 计算陷阱
幸运的是，calc 使用起来非常简单，但有一个问题需要注意。CSS calc 函数内部的间距非常重要。calc 函数中的每个值和它们之间的运算之间必须有一个空格。calc 函数的括号前也不能有空格。例如，以下所有内容都是无效的 CSS。
.class {
width: calc(1px+ 2px);
width: calc(1px +2px);
width: calc(1px+2px);
width: calc (1px + 2px);
}
五、兼容
calc兼容性还是蛮好的!自定义属性不支持IE!
结论
CSS calc和自定义属性是非常有用的功能，看起来它只有一个小众用例，但实际上开辟了很多可能性。虽然大家普遍习惯用Sass或者Less,但是我还是强烈建议您在下一个项目中使用 calc和自定义属性,因为它极大地简化了 CSS 代码。