# CSS 变量的基本用法（css变量和scss变量两者没有任何关系！！！！）

CSS 变量（也称为 CSS 自定义属性）是一种强大的工具，可以让你在整个样式表中重复使用值。以下是 CSS 变量的基本用法：

## 1. 定义变量

在 `:root` 选择器中定义全局变量（推荐）：

```css
:root {
  --primary-color: #4285f4;
  --default-padding: 15px;
  --main-font-size: 16px;
}
```

也可以在特定选择器中定义局部变量：

```css
.container {
  --container-bg: #f1f1f1;
}
```

## 2. 使用变量

使用 `var()` 函数来调用变量：

```css
.button {
  background-color: var(--primary-color);
  padding: var(--default-padding);
  font-size: var(--main-font-size);
}

.container {
  background-color: var(--container-bg);
}
```

## 3. 变量回退值

如果变量未定义，可以提供一个回退值：

```css
.element {
  color: var(--undefined-var, #333); /* 如果 --undefined-var 不存在，使用 #333 */
}
```

## 4. 在 JavaScript 中操作 CSS 变量

```javascript
// 获取变量值
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

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

## 5. 变量计算

可以在 `calc()` 中使用变量：

```css
:root {
  --base-size: 10px;
}

.element {
  margin: calc(var(--base-size) * 2);
}
```

## 6. 变量作用域

- 定义在 `:root` 中的变量是全局的
- 定义在特定选择器中的变量只在该选择器及其子元素中可用

## 7. 媒体查询中的变量

可以根据不同屏幕尺寸修改变量值：

```css
:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}
```

## 优点

1. 提高可维护性：只需修改一处变量值即可全局更新
2. 增强可读性：通过有意义的变量名代替硬编码值
3. 支持动态主题切换
4. 减少重复代码

CSS 变量在现代浏览器中得到了广泛支持（IE11 除外），是构建可维护样式系统的强大工具。

# CSS 变量与 SCSS/Sass 变量的关系

- 核心结论（一句话总结）
- CSS 变量和 SCSS 变量没有直接关系，它们是“不同层级”的变量：
- SCSS 变量 是 编译时变量（预处理器阶段处理）
- CSS 变量 是 运行时变量（浏览器实时生效）   

> CSS 变量（自定义属性）和 SCSS/Sass 变量虽然都用于存储值，但它们是不同的概念，有以下关键区别：
## 1. 本质不同

- **CSS 变量**：是浏览器原生支持的 CSS 功能（CSS Custom Properties）
- **SCSS/Sass 变量**：是预处理器功能，在编译阶段被替换为实际值

## 2. 语法差异

```scss
/* SCSS 变量 */
$primary-color: #4285f4;

/* CSS 变量 */
:root {
  --primary-color: #4285f4;
}
```

## 3. 作用时机

- **SCSS 变量**：在代码编译阶段就被替换为实际值，浏览器看不到变量本身
- **CSS 变量**：会保留在最终的 CSS 中，浏览器在运行时处理

## 4. 作用域

- **SCSS 变量**：有文件作用域，需要 @import 或 @use 来共享
- **CSS 变量**：遵循 CSS 级联规则，可以继承和覆盖

## 5. 动态性

- **SCSS 变量**：编译后固定不变
- **CSS 变量**：可以在运行时通过 JavaScript 动态修改

## 6. 使用场景

| 特性 | SCSS 变量 | CSS 变量 |
|------|----------|----------|
| 编译时替换 | ✓ | ✗ |
| 运行时修改 | ✗ | ✓ |
| 支持媒体查询 | ✗ | ✓ |
| 支持 JavaScript 操作 | ✗ | ✓ |
| 支持 calc() 计算 | ✗ | ✓ |

## 7. 可以一起使用吗？

可以！它们是互补的技术：

```scss
// SCSS 变量用于预处理
$base-size: 10px;

:root {
  // 将 SCSS 变量转换为 CSS 变量
  --base-size: #{$base-size};
}

.element {
  // 使用 CSS 变量
  padding: calc(var(--base-size) * 2);
}
```

## 总结

虽然名称相似，但 CSS 变量和 SCSS/Sass 变量服务于不同的目的：
- **SCSS 变量**：主要用于预处理阶段的代码组织和维护
- **CSS 变量**：用于运行时的动态样式控制和主题切换

现代前端开发中，通常会同时使用这两种技术，各自发挥优势。