其他分享
首页 > 其他分享> > Vue3 JS 与 SCSS 变量相互使用

Vue3 JS 与 SCSS 变量相互使用

作者:互联网

  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>

标签:SCSS,系统,变量存储,文件,基础代码
来源: