css变量 - 技术栈

CSS 变量，正式名称为 CSS 自定义属性（CSS Custom Properties） ，是现代 Web 开发中一项革命性的特性。它让你能够像在其他编程语言中一样，在 CSS 中定义可复用的值，从而极大地提升了样式的可维护性、灵活性和动态性。

一、核心概念

CSS 变量的核心思想非常简单：在一个地方定义一个值，然后在整个样式表中多次使用它。

定义 : 使用 -- 前缀来声明一个变量，例如 --main-color: #3498db;。
使用 : 通过 var() 函数来引用变量的值，例如 color: var(--main-color);。

与 Sass 或 Less 等预处理器的变量不同，CSS 变量是原生的，这意味着它们在浏览器中直接运行，并且可以被 JavaScript 动态修改，实现真正的运行时交互。

二、使用方法

1. 定义变量

CSS 变量的作用域遵循 CSS 的层叠规则。通常有两种定义方式：

全局作用域 : 在 :root 伪类中定义。:root 选择器代表文档的根元素（通常是 <html>），在这里定义的变量可以在整个文档的任何地方被访问。
css 复制代码
```
:root {
  --primary-color: #3498db;
  --base-font-size: 16px;
  --spacing-unit: 1rem;
}
```
局部作用域: 在任何 CSS 选择器内部定义。这样定义的变量只在该选择器及其子元素中生效，非常适合组件级别的样式隔离。
css 复制代码
```
.card {
  --card-bg-color: #ffffff;
  --card-border-radius: 8px;
  background-color: var(--card-bg-color);
  border-radius: var(--card-border-radius);
}
```

2. 使用变量

使用 var() 函数来引用已定义的变量。

css 复制代码

.button {
  background-color: var(--primary-color);
  font-size: var(--base-font-size);
  padding: var(--spacing-unit);
}

3. 提供回退值 (Fallback Value)

var() 函数可以接受一个可选的第二个参数作为回退值。当指定的变量未定义或无效时，浏览器会使用这个回退值。这为样式提供了优雅降级的保障。

css 复制代码

.element {
  /* 如果 --custom-color 未定义，则使用 #333 */
  color: var(--custom-color, #333);
}

三、核心特性

继承性: CSS 变量像其他 CSS 属性一样可以被继承。如果一个元素没有定义某个变量，它会向上查找父元素的值。
动态性: 这是 CSS 变量最强大的特性。你可以通过 JavaScript 在运行时实时读取和修改 CSS 变量的值，从而动态改变页面样式。
与 calc() 结合 : 变量可以与 calc() 函数无缝配合，进行动态计算。
css 复制代码
```
.container {
  width: calc(100% - (var(--spacing-unit) * 2));
}
```

四、主要使用场景

CSS 变量的应用场景非常广泛，以下是几个最典型和强大的用途：

1. 主题切换（深色/浅色模式）

这是 CSS 变量最经典的应用。通过定义一套变量，并在不同主题下赋予它们不同的值，可以轻松实现一键换肤。

css 复制代码

/* 默认（浅色）主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 深色主题 */
.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

/* 应用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease; /* 平滑过渡 */
}

然后通过 JavaScript 给 <body> 或 <html> 元素添加或移除 .dark-theme 类即可。

2. 构建统一的设计系统

在大型项目中，使用 CSS 变量来管理设计令牌（Design Tokens），如颜色、间距、字体、圆角等，可以确保整个应用风格的一致性。

css 复制代码

:root {
  /* 颜色系统 */
  --color-primary: #0066cc;
  --color-success: #52c41a;
  --color-error: #ff4d4f;

  /* 间距系统 */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* 字体系统 */
  --font-size-base: 16px;
  --font-size-lg: 20px;
}

3. 响应式设计

结合媒体查询，可以在不同屏幕尺寸下改变变量的值，从而实现更优雅的响应式布局，而无需为每个断点重写大量样式。

css 复制代码

:root {
  --container-padding: 15px;
  --font-size: 14px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 30px;
    --font-size: 16px;
  }
}

.container {
  padding: var(--container-padding);
  font-size: var(--font-size);
}

4. 与 JavaScript 动态交互

通过 JavaScript，你可以根据用户交互、API 响应或其他逻辑来实时修改样式，创造出丰富的动态效果。

javascript 复制代码

// 获取根元素
const root = document.documentElement;

// 1. 修改变量值
root.style.setProperty('--primary-color', '#e74c3c');

// 2. 读取变量值
const currentColor = getComputedStyle(root).getPropertyValue('--primary-color').trim();

5. vue中使用

xml 复制代码

<template>
  <div class="wrapper" :style="wrapperStyle">
    <div class="top" :style="{ '--hieght-1': '100px', '--bg': 'red' }">
      你好
      <div class="ss">
  			生效
  		</div>
    </div>
    <div class="bottom">
      ----------
      <div class="ss">
  			这里的ss不生效
  		</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
  
let height = ref(100)

const wrapperStyle = computed(() => ({
  '--ap-header-height': height,
  '--ap-left-width': '25%',
} as any));
</script>

<style lang="scss" scoped>
.ss {
  width: 100px;
  height: var(--hieght-1);
  background-color: var(--bg);
}
</style>

五、最佳实践

命名规范 : 使用语义化、清晰的命名，如 --primary-color 而不是 --color1。推荐使用 kebab-case（短横线分隔）格式。
作用域管理 : 合理使用全局和局部变量。将通用设计令牌放在 :root，将组件特有的变量放在组件选择器内部。
避免过度使用: 并非所有值都需要定义为变量。只对那些需要复用或可能动态改变的值使用变量。