Как использовать переменную в sass внутри map-get?

В Vue.js есть несколько способов использовать переменные внутри Sass и map-get.

1. Использование простых переменных:
В Sass вы можете определить переменную и использовать ее внутри map-get. Например, предположим, у вас есть переменная $primary-color, и вы хотите использовать ее внутри map-get для получения значения цвета. Вот пример:

$primary-color: #ff0000;

$theme-colors: (
  primary: $primary-color,
  secondary: #00ff00
);

.some-class {
  color: map-get($theme-colors, primary);
}

2. Использование переменных из Vue компонента:
Вы также можете использовать переменные из Vue компонента внутри Sass и map-get. Для этого вам нужно создать CSS переменные из переменных Vue компонента, а затем использовать их внутри Sass. Например:

<template>
  <div class="some-class">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#ff0000'
    }
  }
}
</script>

<style lang="scss">
$theme-colors: (
  primary: var(--primary-color),
  secondary: #00ff00
);

.some-class {
  color: map-get($theme-colors, primary);
}
</style>

Здесь мы создали переменную primaryColor внутри Vue компонента и экспортировали ее в CSS в качестве CSS переменной с помощью var(--primary-color). Затем мы использовали эту переменную внутри Sass и map-get.

Важно отметить, что если вы используете второй способ, вы должны убедиться, что ваши стили в компоненте имеют префикс >>> или /deep/ для применения стилей к подкомпонентам. Например:

.some-class >>> .child-component {
  color: map-get($theme-colors, primary);
}

Оба способа позволяют использовать переменные в Sass и map-get, но выбор зависит от того, где и как вы храните ваши переменные и как вы хотите их использовать.