如何在 CSS 中引入 JS 变量

  • 2020-09-03
  • 0
  • 0

一、在传统前端开发中实现

在 JS 中定义:

document.body.style.setProperty('--color', 'red')

在 CSS 中引用:

h1 {
    color: var(--color);
}

作用于跟 js 变量类似:

body {
    --color: red;
}

h1 {
    color: var(--color); /** 这里获取到的是全局声明的变量,值为red **/
}

div {
    --color: blue;
    color: var(--color); /** 这里获取到的是局部声明的变量,值为blue **/
}

也就是说,变量的作用域就是它所在的选择器的有效范围。

二、在 Vue 中实现

下面介绍怎样才能在 vue3 的 <style> 中使用 <script> 里声明的变量:

首先创建一个支持 vue3 的 vite 项目

npm init vite-app test-project

然后在组件中这样使用:

<template>
  <h1>{{ color }}</h1>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

首先要在<style>标签中写个vars=”{}”,再在大括号里写上你在data中声明过的值;如果有多个变量的话,变量之间需要使用逗号进行分隔:

<template>
  <h1>Vue</h1>
</template>

<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>

<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

评论

还没有任何评论,你来说两句吧