css如何定义变量,css使用js变量,css变量作用域,css变量主题切换,css var变量,css使用vue变量
CSS3 变量（也称为自定义属性）是一种在 CSS 中声明变量并在文档中复用的方式。这些变量使用 -- 作为前缀，并可以在任何 CSS 声明中引用它们。

例如，我们可以使用 --primary-color 定义一个主色变量，并将其应用于多个元素样式中：

css
:root {
--primary-color: #ff0000;
}

.header {
background-color: var(--primary-color);
}

.button {
color: var(--primary-color);
}


在上面的例子中，我们使用 :root 选择器来定义全局的 --primary-color 变量。然后在 .header 和 .button 元素样式中，我们通过 var() 函数引用了这个变量。

CSS3 变量还可以通过 JavaScript 动态修改和使用。例如，我们可以使用 JavaScript 获取元素并设置其 --primary-color 变量：

html
<button id="btn">Change color</button>

<style>
.box {
--primary-color: #ff0000;
background-color: var(--primary-color);
}
</style>

<script>
const box = document.querySelector('.box');
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
box.style.setProperty('--primary-color', '#00ff00');
});
</script>


在上面的例子中，当点击按钮时，JavaScript 修改了 .box 元素的 --primary-color 变量值为绿色。这导致 .box 的背景颜色从红色变为绿色。