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

Sumurai8 · Accepted Answer · 2019-02-10 11:35:53Z

3

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.

answered Feb 10, 2019 at 11:35

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

initialize sass variable with property defined in vue as computed

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related