CSS自定义属性：引入 | 使用var() | cal()计算 | css 与 js 的连接

本文链接：https://blog.csdn.net/ImagineCode/article/details/92835414

⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

CSS 自定义属性

CSS 自定义属性（也被称为 CSS 变量）,目前从 Can I use 上获取的信息显示除了 Edge外主流浏览器的最新版都已经支持这个特性了，而 Edge 也将支持这个属性。考虑兼容尚未实现此特性的浏览器，那目前最好的选择就是使用 PostCSS。

本篇要点：

自定义属性的概念
var()
calc()

引入

自定义属性，是一种开发者可以自主命名和使用的CSS属性。浏览器在处理像 color 、position 这样的属性时，需要接收特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？这倒和习惯无异：

.foo {
	color: red;
	--theme-color:gray;
}

自定义元素的定义由 -- 开头，这样浏览器能够区分自定义属性和原生属性，

假如只是定义了一个自定义元素和它的属性值，浏览器是不会做出反应的。如上面的代码， .foo 的字体颜色由 color 决定，但 --theme-color 对 .foo 没有作用。

可以用 CSS 自定义元素存储任意有效的 CSS 属性值：

.foo {
	--theme-color:blue;
	--spacer-width: 8px;
	--favorite-number: 3;
	--greeting: "How are you";
	--reusable-shadow: 0 3px 1px -2px rgba(0,0,0,0.85);
}

使用

使用 var() 方法实现：

.button {
	background-color: var(--theme-color);
}

这段代码中，我们把.button的background-color属性赋值为 --theme-color的值。

同时，这个–theme-color能用在任意选择器和属性上：

.button {
	background-color: var(--theme-color);
}
p {
	color: var(--theme-color);
}
.title > .p {
	border-color: var(--theme-color);
}

缺省值

如果开发者并没有定义过 --theme-color 这个变量呢？var()可以接收第二个参数作为缺省值：

.button {
	background-color: var(--theme-color,gray);
}

或者把另一个自定义属性作为缺省值：

.button {
	background-color: var(--theme-color,var(--default-bg-color));
}

传参数时总是传入一个缺省值是一个好习惯，特别是在构建 web components 的时候。为了让你的页面在不支持自定义属性的浏览器上正常显示，别忘了加上兼容代码：

.button {
	background-color:gray;//兼容性处理
	background-color: var(--theme-color,gray);
}

作用域和级联

自定义属性遵从标准的作用域和级联规则，开发者按照平时使用的习惯来就可以了！

你可能希望将 --theme-color 设置为全局变量，处处可用。最简单的方法是使用 :root 伪元素：

:root {
	--theme-color: gray;
}

这样，整个document，都可以使用--theme-color。

但当你希望不同的模块使用不同的 --theme-color 值怎么办呢？

只需要在模块的作用域中给属性重新赋值，新的颜色就会分模块生效，而不需要开发者一个个重置使用到 --theme-color 的属性。

section.about {
	--theme-color: darkblue;
}
section.contacts {
	--theme-color: darkred;//重新赋值
}
section.news {
	--theme-color: yellow;
}

CSS计算

calc() 函数常常被用于跨单位的计算：

.child {
	width: calc(100% - 16px)
}

事实上这个计算是在浏览器运行时进行的，浏览器会将 calc()的计算结果以像素单位呈现在屏幕上。

calc() 与 CSS 自定义属性结合

:root {
	--base-size: 4px;
	--title-multiplier: 5;
	--body-multiplier: 3;
}
.title {
	text-size: calc(var(--title-multiplier) * var(--base-size))
}
.body {
	text-size: calc(var(--body-multiplier)* var(--base-size));
}

CSS 与 javascript之间的桥梁

自定义属性和 Sass、Less 或者 PostCSS 这些处理器语言一个非常重要的不同点在于：浏览器是可以解析自定义属性的。这就意味着开发者可以动态改变自定义属性的值。这是 CSS 迈出的一大步。

就和平时用 JS 操作元素任意的属性一般，自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作：

const styles = getComputedStle(document.querySelector('.foo'));

const oldColor = styles.getPropertyValue('--color').trim();
foo.style.setProperty('--color','green');