В SASS такое непосредственное использование значений переменной внутри функции map-get не поддерживается. Вместо этого, вы можете использовать функцию `map-merge` для создания новой карты, добавив к ней переменную в качестве ключа, а затем использовать функцию `map-get` для получения значения по этому ключу.
Например, если у вас есть переменная `$color` в SCSS, которую вы хотите использовать в качестве ключа для получения цвета из карты `$colors`, вы можете сделать следующее:
```scss
$color: 'red';
$colors: (
'red': #FF0000,
'blue': #0000FF
);
$new-colors: map-merge($colors, (map-get($colors, $color): #00FF00));
$new-color: map-get($new-colors, $color);
```
В данном примере мы создаем новую карту `$new-colors`, добавляя в нее пару ключ-значение с переменной `$color` в качестве ключа и желаемым цветом. Затем мы используем функцию `map-get` для получения значения цвета из новой карты по ключу, сохраняя его в переменную `$new-color`.
В вашем случае с использованием Vue.js, вы можете передать переменную в SCSS из компонента Vue в качестве значения свойства цвета, а затем использовать эту переменную в качестве ключа в функции `map-get`.
```html
<template>
<div :style="{ '--color': myColor }"></div>
</template>
<style lang="scss">
@import 'colors'; // Подключение файла, содержащего карту цветов
div {
background-color: map-get($colors, var(--color));
}
</style>
```
В этом примере мы устанавливаем CSS переменную `--color` в значение переменной `myColor` в компоненте Vue. Затем в SCSS мы используем функцию `map-get` для получения значения цвета из карты `$colors` по ключу, заданному переменной `--color`.