initialize sass variable with property defined in vue as computed

Question

I'm working on a component in VueJS which will present a bar chart. For that i need to calculate a number and that's why it's computed. in my sass code i have a varaible - $totalRows: that i want to initialize with the computed property value: sass:

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

computed property:

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

any idea how can i init the $totalRows to be equal to the value returned from someNum

score 3 · Accepted Answer · answered Feb 10 '19 at 11:35

Your scss styling is turned into css when you compile for production. Since computed properties are evaluated at runtime, it is not possible to have a computed variable as a sass variable.

You can use inline styling to set styling based on your computed property. Since your component is rerendered whenever the data it relies on changes, you can set things like a column width based on that.

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

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

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

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

If you do not need to calculate a variable, you can share it between scss and javascript using json and a scss json importer.

initialize sass variable with property defined in vue as computed

1 Answers1