инициализировать переменную sass со свойством, определенным в vue как вычисленное

Question

Я работаю над компонентом в VueJS, который представит гистограмму.Для этого мне нужно вычислить число, и поэтому оно вычисляется.в моем коде sass у меня есть переменная - $totalRows:, которую я хочу инициализировать с вычисленным значением свойства: sass:

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

вычисляемое свойство:

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

любая идея, как можноя инициализирую $totalRows равным значению, возвращенному из someNum

Answer 1

Ваш стиль Scss превращается в CSS, когда вы компилируете для производства.Поскольку вычисляемые свойства оцениваются во время выполнения, невозможно иметь вычисляемую переменную в качестве переменной sass.

Вы можете использовать встроенные стили для установки стиля на основе вычисляемого свойства.Поскольку ваш компонент перерисовывается всякий раз, когда изменяются данные, на которые он опирается, вы можете установить такие значения, как ширина столбца, исходя из этого.

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

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

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

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

Если вам не нужно вычислять переменную, вы можете поделитесь им между scss и javascript, используя json и импортер scss json.