vue3和vue2 使用css变量的方法（附带scss的使用方式）

在Vue 3和Vue 2中，使用CSS变量（也称为CSS自定义属性）的方法基本相同。CSS变量提供了一种灵活的方式来定义可在页面中重复使用的值，从而使样式表更易于维护和修改。下面是在Vue 3和Vue 2中使用CSS变量的方法，以及如何在SCSS中使用它们。

在Vue 3和Vue 2中使用CSS变量

1. 定义CSS变量

在全局或组件级别的<style>标签中，你可以定义CSS变量。这些变量通常以--开头。

/* 在全局样式中定义 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

/* 或在组件样式中定义 */
.my-component {
  --component-bg-color: #f8f9fa;
}

2. 使用CSS变量

在定义了CSS变量后，你可以在样式规则中使用var()函数来引用这些变量。

.button {
  background-color: var(--primary-color);
  color: white;
}

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

在SCSS中使用CSS变量

当使用SCSS（或Sass）时，你也可以定义和使用变量，但这些变量是Sass变量，而不是CSS自定义属性。然而，你可以在SCSS中引用CSS变量。

1. 定义SCSS变量

在SCSS中，你可以使用$符号来定义变量。

$primary-color: #007bff;
$secondary-color: #6c757d;

2. 在SCSS中使用CSS变量

虽然SCSS不直接支持CSS变量的赋值给SCSS变量，但你可以直接在SCSS规则中使用var()函数来引用CSS变量。

.button {
  background-color: var(--primary-color); // 使用CSS变量
  color: white;
}

3. 混合使用SCSS变量和CSS变量

你可以在同一份SCSS文件中混合使用SCSS变量和CSS变量，但要注意它们的作用域和加载顺序。

注意事项

• CSS变量具有更好的动态性，可以在运行时更改，而SCSS变量在编译时确定。
• CSS变量具有继承性，可以在DOM树中向下传递。
• 在使用CSS变量时，要确保浏览器兼容性，因为较旧的浏览器可能不支持它们。

通过结合使用Vue 3（或Vue 2）和SCSS，你可以创建出既灵活又易于维护的前端样式。