You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.1 KiB

Raw Blame History Unescape Escape

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

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

1. 定义变量

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

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

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

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

2. 使用变量

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

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

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

3. 变量回退值

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

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

4. 在 JavaScript 中操作 CSS 变量

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

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

5. 变量计算

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

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

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

6. 变量作用域

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

7. 媒体查询中的变量

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

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

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

优点

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

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

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

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

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

1. 本质不同

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

2. 语法差异

/* 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 变量用于预处理
$base-size: 10px;

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

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

总结

虽然名称相似，但 CSS 变量和 SCSS/Sass 变量服务于不同的目的：

SCSS 变量：主要用于预处理阶段的代码组织和维护
CSS 变量：用于运行时的动态样式控制和主题切换

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

4.1 KiB Raw Blame History Unescape Escape