如何使用CSS变量

CSS变量（又称作自定义属性）允许你存储一个值以便多次使用，提高代码复用性、简化维护工作，以及实现实时主题的动态更改。例如，可以将主要的颜色、字体大小或布局间距定义为CSS变量，在整个样式表中使用它们。若需要更改某个值，只需更新变量定义即可。CSS变量在网页设计中的动态性和响应式设计上表现尤为突出。

CSS变量的声明类似于常规的CSS属性，以两个破折号（–）开头，例如：--mAIn-color: #333;将主颜色定义为深灰色。使用变量时，使用 var() 函数，如：color: var(--main-color);。

一、CSS变量的声明与使用

定义变量

CSS变量通常在:root伪类中定义，这使得它们在全局范围内有效。:root是文档树的根元素，在HTML中，它通常指向<html>元素。

:root {
  --main-color: #333;
  --secondary-color: #666;
  --default-padding: 1rem;
}

使用变量

使用var()函数来应用这些变量，可以在任何常规的CSS属性中替代常规的值。

body {
  color: var(--main-color);
  background-color: var(--secondary-color);
  padding: var(--default-padding);
}

二、CSS变量的作用域

局部作用域

虽然在:root中定义的变量是全局的，但也可以在选择器中定义变量，仅在该选择器及其后代元素中有效。

.container {
  --container-padding: 20px;
}
.container p {
  padding: var(--container-padding);
}

全局作用域

全局作用域通常是在:root选择器中声明的，它对整个文档有效。

:root {
  --global-margin: 16px;
}

三、CSS变量的继承

CSS变量按照层叠和继承规则应用，这意味着子元素可以继承父元素定义的变量。

继承示例

若在某个父元素中定义一个变量，子元素将会继承这个变量值。

.parent {
  --text-color: #007bff;
}
.child {
  color: var(--text-color);
}

重写变量

子元素可以重写从父元素继承的变量。

.parent {
  --text-color: #007bff;
}
.child {
  --text-color: #ff5733; /* 重写变量 */
  color: var(--text-color);
}

四、CSS变量的兼容性和回退

浏览器兼容性

CSS变量在现代浏览器中有很好的支持，但是在IE11及更早的浏览器中不支持。因此，在必须支持旧浏览器的项目中，使用CSS变量时应当小心。

回退机制

var()函数允许一个回退值，以便在变量未定义或无法使用时使用。

.example {
  color: var(--unknown-var, #ff0000); /* 若--unknown-var未定义，使用红色作为回退 */
}

五、使用CSS变量进行主题设计

动态更改变量

CSS变量使得动态更改主题成为可能，只需用JavaScript更改根元素的变量值即可。

document.documentElement.style.setProperty('--main-color', '#00ff00');

主题设计实例

可以创建多个主题相关的变量集，并结合JavaScript实现网页主题的快速切换。

:root {
  --theme-color-dark: black;
  --theme-color-light: white;
}
body.dark-mode {
  background-color: var(--theme-color-dark);
  color: var(--theme-color-light);
}
body.light-mode {
  background-color: var(--theme-color-light);
  color: var(--theme-color-dark);
}

六、CSS变量在响应式设计中的应用

媒体查询与变量

结合媒体查询，CSS变量可以在不同屏幕尺寸下赋予不同的值，增加设计的响应性。

:root {
  --responsive-margin: 8px;
}
@media (min-width: 768px) {
  :root {
    --responsive-margin: 16px;
  }
}
.container {
  margin: var(--responsive-margin);
}

使用函数与变量

CSS变量可以和其他CSS函数（如calc()）结合，为响应式设计提供更灵活的解决方案。

.element {
  padding: calc(var(--base-pad) * 2);
}

七、CSS变量的高级应用

计算与变量

使用calc()函数和CSS变量可以创建复杂的计算式，这在创建动态尺寸布局时十分有用。

:root {
  --base-size: 5px;
}
div {
  width: calc(10 * var(--base-size));
}

动画与变量

CSS变量还可以应用在动画中，这使得动画值的动态更改变得可行。

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--move-distance));
  }
}
.object {
  --move-distance: 100px;
  animation: move 2s infinite;
}