Subscribe on changes!

SFC style variable do not return value from sass map-get

avatar
Jan 29th 2022

Version

3.2.29

Reproduction link

github.com

Steps to reproduce

Trying the RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md

Create a sass map and then use value from Vue3 with v-bind in scss to return a value from the sass map.

What is expected?

Return the value from sass map

What is actually happening?

Null value is returned?


Have also tried to use vue v-bind as parameter input to sass @mixin ( https://sass-lang.com/documentation/at-rules/mixin ) No success.

avatar
Jan 29th 2022
  textarea.form-control {
    &:disabled {
      background-color: map-get($my-color-map, v-bind(selected));
    }
  }

once the map-get is processed by the scss preprocessor it is gone, and vue will not be able to inject a css variable like you might have expected

avatar
Jan 29th 2022

Yeah, this can't work, SCSS runs at build-time, but v-bind' value will be inserted at runtime.