How to use SASS variables in template

[imagine]

I would like to use SASS variable in the template as follows:

<circle fill="$primary" class=“breath-circle” cx=“50%” cy=“50%” :r=“radius” />

Is it possible?

[beets]

@imagine You can use Quasar’s color helper:

<template>
  <circle :fill="primary" class=“breath-circle” cx=“50%” cy=“50%” :r=“radius” />
</template>
<script>
import { colors } from 'quasar'
export default {
  data() {
    return {
      primary: colors.getBrand('primary')
    }
  }
}
</script>

[imagine]

@beets Brilliant, thanks!