VUE JS与CSS相互引用变量

variables.css内容：要达到以下效果还得安装sass相关插件

// 底部版权区域高度
$footer-reserved-height: 30px;

// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  footerReservedHeight: $footer-reserved-height;
}

【1】JS中引用CSS的变量

import variables from '@/assets/styles/variables.scss'

computed: {
    ...mapGetters('app', ['isMobile']),
    variables() {
      return variables
    },
    tableBodyHeight() {
      if(!!this.tableHeight) {
        return this.tableHeight
      }
      return this.variables.tableHeight
    }
},

【2】CSS中引用JS中的变量

<template>
<div
  class="table-main"
  :style="{'--tableHeight': `${tableHeight}px`}"
>

</div>
</template>

<script>
export default {
  props: {
    tableHeight: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-height {
   height: var(--tableHeight);
   max-height: var(--tableHeight);
}
</style>