css计算
CSS calc 只是一个 CSS 函数，类似于rgb,var等，它可以让您对各种 CSS 单元进行加法、减法、除法和乘法运算。
组合不同的单位
使用 CSS calc，我们可以将不同的 CSS 单元组合在一起，以创建传统 CSS 单元无法表示的值。例如，如果我们想创建一个距离 100vw 宽 30px 的盒子怎么办。本质上是一个 100vw 的盒子，其中移除了 30px 的空间。
.class {
width: calc(100vw - 30px);
}
css变量和计算
.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!
网友评论