持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

在开发中会遇到如下需求：

本文提供解决上述问题的思路。

在 src 目录下创建 scss 目录，该目录存储 scss 文件。这里需要注意，如果 JS 要使用 SCSS 文件中定义的变量，在 vue3 中，存储变量的 SCSS 文件名格式为 xxx.module.scss，

如 variables.module.scss。与 vue 2.x 不同，这里的 .module 不能省略，在 vue 2.x 不要求文件名使用 xxx.module.scss 的方式。

在 src/scss/ 目录下创建

config.module.scss 文件，该文件用于定义 scss 变量：

上面创建的 config.module.scss 文件中定义了一个变量：$titleColor。

如果咱们只是在其他 scss 文件或 vue 文件的 style 标签中使用，只需要在对应文件使用 @import 引入 config.module.scss 即可。但如果需要在 script 中的 JS/TS 中使用，还需要通过 export 将需要使用的变量导出：

这样便将 $titleColor 的值通过变量名 titleColor 导出给 JS/TS。

在 vue 文件的 script 中如果要使用上面的变量，先导入该 scss 文件：

config 的值就是 scss 文件 :export 的对象。输出 config 对象：

控制台输出：

此时便可通过 config.titleColor 获取 scss 文件中 $titleColor 的值。

vue 代码如下：

在讨论 SCSS 代码使用 JS 变量前，咱需要先聊聊 CSS Next 中的 CSS 变量。CSS 2、CSS 3 大部分哥们都耳熟能详，CSS Next 也不是什么新鲜事物了。其中 CSS Next 很厉害的一个能力就是 CSS 变量。

咱可以在上面的 src/scss 目录下创建 test.css 文件来尝试使用 css 变量。

:root 中定义了全局 CSS 变量，CSS变量的命名约定以两个 - 开头，上面定义了一个全局 CSS 变量，变量名为 --bgColor。

使用变量时使用 CSS 的 var() 函数。

在 main.ts 中引入该文件：

此时在浏览器中可以看到背景色变成粉红色。

在组件中也可以使用 CSS 变量。在对应的选择器中定义变量即可。

有了 CSS 变量的基础，接下来就可以讨论 scss 中如何使用 JS 变量了。

咱们用一个 demo 来说明 scss 中如何使用 js 变量：有三个按钮和一个 div，点击三个按钮会切换 div 的背景色和文字颜色。

首先实现页面的基础代码：

页面如下：

上面代码比较简单，btns 变量定义了三个按钮，通过 v-for 显示三个按钮。点击按钮的时候传递 bgColor 和 textColor 两个参数给点击事件 onBtnClick 函数。显示 Hello World 的 div，通过 --textColor 和 --bgColor 两个变量来控制背景色和文字颜色。

接下来便是实现点击不同按钮时，使用不同的文字颜色和背景色。

Vue3 中提供了两种方式来实现动态改变 css 变量。下面两种方式都基于上面的基础代码实现：

Vue 提供了 setProperty 的方式来改变 CSS 变量。

Vue3 中为 vue 文件的 style 提供了 v-bind 函数，实现了将 JS/TS 变量绑定到 CSS 变量上。

上面两种方式根据自己的喜好使用。大家可以根据上面的思路尝试实现主题切换、动态换肤等功能，在后面的实战系列文章中咱在继续讨论这个话题。

梦游的猪: 感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货