你需要知道的calc和自定义属性！

当大多数人想到在 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)  //red
}

自定义属性默认值

由于自定义属性是 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 属性一样。

至于设置自定义属性的值，则更加简单。

// 例子1

document.documentElement.style.setProperty('--color', 'green')

// 例子2

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 代码。