您现在的位置是：网站首页 > 变量的定义与使用文章详情

变量的定义与使用

陈川【 CSS 】 57800人已围观 2167字

CSS中的变量，也称为自定义属性，允许开发者在样式表中定义可复用的值，并通过变量名引用它们。这种方式提升了代码的可维护性和灵活性，尤其在大型项目中效果显著。

变量的基本语法

CSS变量以两个连字符--开头，后跟变量名。定义变量时通常放在:root伪类中，使其成为全局变量：

:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

局部变量可以在任何选择器内定义，仅在该选择器及其子元素中生效：

.container {
  --local-bg-color: #f1c40f;
}

变量的使用方式

通过var()函数调用已定义的变量，第二个参数可设置备用值：

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  border: 1px solid var(--undefined-var, #ccc); /* 使用备用值 */
}

变量作用域的特性

CSS变量遵循级联规则，子元素会继承父元素的变量值：

:root {
  --text-size: 14px;
}
.special-section {
  --text-size: 18px; /* 局部覆盖 */
}
p {
  font-size: var(--text-size);
}

动态修改变量

通过JavaScript可以实时修改变量值，实现动态主题切换：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

媒体查询中修改变量能创建响应式布局：

@media (max-width: 768px) {
  :root {
    --spacing-unit: 8px;
  }
}

变量的高级用法

计算与单位处理

变量可以与calc()结合实现动态计算：

:root {
  --base-size: 10;
}
.box {
  width: calc(var(--base-size) * 5px); /* 50px */
}

颜色操作

通过变量组合实现颜色变换：

:root {
  --hue: 180;
  --main-color: hsl(var(--hue), 100%, 50%);
}
.error {
  --hue: 0; /* 修改色相值 */
}

实际应用案例

主题系统实现

定义多套主题变量并通过类名切换：

:root {
  --theme-bg: white;
  --theme-text: #333;
}
.dark-mode {
  --theme-bg: #222;
  --theme-text: #eee;
}
body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

组件样式隔离

为不同组件定义独立变量命名空间：

.alert {
  --alert-padding: 12px;
  --alert-border: 2px dashed;
}
.alert-warning {
  --alert-color: #f39c12;
}

浏览器兼容性注意事项

虽然现代浏览器普遍支持CSS变量，但在旧版IE中需要备用方案：

.title {
  color: #2c3e50; /* 备用值 */
  color: var(--title-color);
}

使用@supports检测特性支持：

@supports (--css: variables) {
  .advanced-feature {
    display: block;
  }
}

性能优化实践

避免在动画中频繁更新根变量，改为局部修改变量：

/* 不推荐 */
@keyframes bad-example {
  to { --rotate: 360deg; }
}

/* 推荐方案 */
.box {
  --rotate: 0deg;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}