用 vue 中定义的属性初始化 sass 变量

【问题标题】：initialize sass variable with property defined in vue as computed用 vue 中定义的属性初始化 sass 变量
【发布时间】：2019-02-10 19:35:53
【问题描述】：

我正在开发 VueJS 中的一个组件，它将显示一个条形图。为此，我需要计算一个数字，这就是计算它的原因。在我的 sass 代码中，我有一个变量 - $totalRows: 我想用计算的属性值进行初始化：萨斯：

<style lang="scss" scoped>
    //$totalRows: $someNum;
</style>

计算属性：

computed: {
   someNum(){
       return 10 //for example purposes
   }
}

知道如何将$totalRows 初始化为等于从someNum 返回的值

【问题讨论】：

标签： vue.js sass

【解决方案1】：

当您为生产进行编译时，您的 scss 样式会转换为 css。由于计算属性是在运行时评估的，因此不可能将计算变量作为 sass 变量。

您可以使用内联样式来根据您的计算属性设置样式。由于您的组件在其依赖的数据发生变化时会重新呈现，因此您可以根据该数据设置列宽等内容。

<div :style="styling"></div>

computed: {
  someNum() {
    return 10;
  },

  styling() {
    const fullWidth = 1000; //px

    return {
      width: fullWidth / this.someNum;
    }
  }
}

如果不需要计算变量，可以share it between scss and javascript using json和一个scss json importer。

【讨论】：