css中的变量使用
CSS 变量（也称为自定义属性）允许你在 CSS 中定义可重用的值。这些变量可以在整个样式表中使用，并且可以动态更新。
1. 定义和使用 CSS 变量
定义变量
在 CSS 中，变量使用 -- 前缀来定义。通常在 :root 选择器中定义全局变量，以便在整个文档中使用。
:root {
--primary-color: #1e90ff;
--font-size: 16px;
}使用变量
使用 var() 函数来引用变量。
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}2.局部变量
局部变量在特定的选择器中定义，只在该选择器及其子选择器中有效。
.button {
--button-color: #ff4500; /* 局部变量 */
background-color: var(--button-color);
color: white;
padding: 10px 20px;
}
.button:hover {
background-color: darken(var(--button-color), 10%); /* 使用局部变量 */
}3.动态更新变量(setProperty)
CSS 变量可以通过 JavaScript 动态更新，从而实现动态样式变化。
<div id="app" style="--primary-color: #1e90ff;">
<p>这是一个段落。</p>
</div>
<button onclick="changeColor()">改变颜色</button>
<script>
function changeColor() {
document.getElementById('app').style.setProperty('--primary-color', '#ff4500');
}
</script>总结
- 定义变量：使用
--前缀在 CSS 中定义变量。 - 使用变量：使用
var()函数引用变量。 - 全局变量：在
:root选择器中定义，可在整个文档中使用。 - 局部变量：在特定的选择器中定义，只在该选择器及其子选择器中有效。
- 动态更新：可以通过 JavaScript 动态更新 CSS 变量，实现动态样式变化。
CSS 变量可以在任何选择器中定义，不一定要写在 :root 里面。:root 是一个伪类，表示文档的根元素（通常是 <html> 元素），因此在 :root 中定义的变量是全局可用的。
但是. :root 是一个标准的 CSS 伪类，表示文档的根元素，:root 这个 root 是固定的，并不是可变的。。