Vue3 JS 与 SCSS 变量相互使用

时间:2022-10-17 16:08:56

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

  1. JS 中使用 SCSS 变量。如在 scss 中定义了一个颜色,el-menu 组件使用该颜色作为背景色,此时需要获取 scss 变量,通过 background-color 属性将该变量值传递给 el-menu 组件(当然你也可以在 JS 中重新定义一个变量存储该颜色)。
  2. SCSS 中使用 JS 变量。如动态换肤功能,用户选中某个颜色作为主题色,整个系统的主题色都切换为这个主题色。用户选择的这个颜色使用 JS 变量存储,SCSS 中需要使用该 JS 变量存储的颜色。类似的场景还有暗黑模式等。

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

1 JS 使用 SCSS 变量

1.1 创建 SCSS 变量文件

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 变量:

$titleColor: #FF0000;

1.2 导出 SCSS 变量

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

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

$titleColor: #FF0000;

:export {
  titleColor: $titleColor;
}

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

1.3 使用 SCSS 变量

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

import config from '@/scss/config.module.scss'

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

console.log(config)

控制台输出:

{titleColor: '#FF0000'}

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

vue 代码如下:

<template>
  <div>
    <h1 :style="{color: color}">JS 获取 SCSS 变量值</h1>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import config from '@/scss/config.module.scss'

const color = ref(config.titleColor)
</script>

2 CSS 变量

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

2.1 全局 CSS 变量

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

:root {
  --bgColor: pink;
}

body {
  background-color: var(--bgColor);
}

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

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

main.ts 中引入该文件:

import '@/scss/test.css'

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

2.2 组件内 CSS 变量

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

<template>
  <div class="demo">
    <div class="css-div">CSS 变量</div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
.demo {
  --font-size: 30px;

  .css-div {
    --textColor: blue;

    font-size: var(--font-size);
    color: var(--textColor);
  }
}
</style>

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

3 SCSS 使用 JS 变量

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

3.1 基础代码

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

<template>
  <div class="demo">
    <button v-for="(item, index) in btns"
            :key="index"
            @click="onBtnClick(item.bgColor, item.textColor)"
    >{{ item.title }}</button>

    <div>
      <div class="example">Hello World</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const btns = [
  { title: '红色主题', bgColor: '#FF9191', textColor: '#FF0000' },
  { title: '蓝色主题', bgColor: '#B3C4FF', textColor: '#042BA9' },
  { title: '默认主题', bgColor: '#333333', textColor: '#FFFFFF' }
]
const onBtnClick = (bgColor: string, textColor: string) => {
  console.log(bgColor, textColor)
}
</script>

<style scoped lang="scss">
.demo {
  padding: 10px;

  .example {
    --textColor: #FFFFFF;
    --bgColor: #333333;

    display: inline-block;
    margin-top: 20px;
    font-size: 20px;
    padding: 20px 50px;
    color: var(--textColor);
    background: var(--bgColor);
  }
}
</style>

页面如下:

Vue3 JS 与 SCSS 变量相互使用

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

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

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

3.2 方式1:setProperty

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

  1. 为目标 div 添加 ref 属性:
<template>
		...
    <div>
      <div class="example" ref="exampleRef">Hello World</div>
    </div>
  </div>
</template>
  1. 获取到该 div 的引用(ref):
import { ref } from 'vue'

const exampleRef = ref<HTMLDivElement | null>()
...
  1. 调用该引用 style 属性的 setProperty 方法:
<script lang="ts" setup>
...
const onBtnClick = (bgColor: string, textColor: string) => {
  if (exampleRef.value) {
    exampleRef.value?.style.setProperty('--textColor', textColor)
    exampleRef.value?.style.setProperty('--bgColor', bgColor)
  }
}
</script>
...

3.3 方式2:v-bind

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

  1. 在 TS 中定义两个变量存储点击事件时传递的两个参数:
const currentBgColor = ref('#333333')
const currentTextColor = ref('#FFFFFF')
  1. 点击事件中点参数赋值给上面两个变量:
const onBtnClick = (bgColor: string, textColor: string) => {
  currentBgColor.value = bgColor
  currentTextColor.value = textColor
}
  1. style 中使用 v-bind 绑定上面两个 JS 变量:
.demo {
	...

  .example {
    --textColor: v-bind(currentTextColor);
    --bgColor: v-bind(currentBgColor);

    ...
    color: var(--textColor);
    background: var(--bgColor);
  }
}

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

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