CSS中使用变量的两个函数var和calc

作者：System 时间：2024年08月09日分类：所有,css 字数：587

在CSS中，我们可以使用变量来存储值，这些变量可以是静态的或动态的。我们可以使用两种不同的函数来创建和使用这些变量：var() 和 calc()。

var() 函数用于引用自定义的属性，也就是所谓的 CSS 变量。这些变量可以在各个 CSS 文件之间进行共享，也可以在运行时通过 JavaScript 进行更改。

例如，我们可以在 :root 选择器中定义一个全局变量，然后在整个文档中引用它。




:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}

calc() 函数用于在值之间进行数学运算。这些值可以是任何长度单位、百分比或者任何 CSS 支持的数学运算。

例如，我们可以将元素的宽度设置为视窗宽度的一半，减去一些固定的边距。




div {
  width: calc(50vw - 20px);
}

注意：CSS变量（也称为CSS自定义属性）是在CSS中声明的，而var() 函数用于引用这些变量。而calc() 函数用于在运行时进行数学运算以得出值。