Передача SASS переменных через props во vue 3. Возможно ли это

Question

Всем привет. Я делаю компонент кнопки на vue3 c возможностью переиспользования. Вот код кнопки

<template>
    <div class="button">
        <slot />
    </div>
</template>
<script setup>
const props = defineProps({
  color: {
    type: String,
    default: '#fff'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  }
});
</script>
<style lang="scss">
@import '@/assets/styles/helpers/variables';

.button {
    padding: 2rem;
    border-radius: 1rem;
    cursor: pointer;
    border: 1px solid;
    color: $text-black;
    background-color: v-bind('backgroundColor');
    border-color: v-bind('color');
}
</style>

Вот так я использую кнопку

<Button :color="'$error'" :backgroundColor="'$pink'">Кнопка</Button>

Проблема заключается в том, что когда я в props передаю SASS переменные, то из значения не применяются. Когда я просто передаю цвет в формате HEX, то всё применяется как надо. Если я в стилях использую SASS переменные, то тоже всё применяется. А вот если данные приходят из props то ничего не происходит.

Answer 1

нашел решение сам, только переделал SASS переменные в CSS переменные

<template>
  <div class="button" ref="button" :style="buttonStyle">
    <slot />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const button = ref(null);
const props = defineProps({
  color: {
    type: String,
    default: '#fff'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  textColor: {
    type: String,
    default: '#000'
  },
});

const buttonStyle = ref({});

onMounted(() => {
  const { $gsap } = useNuxtApp();
  const root = document.documentElement;

  $gsap.to(button.value, { x: 100, duration: 2 });

  const rootStyles = getComputedStyle(root);

  buttonStyle.value = {
    '--button-color': rootStyles.getPropertyValue(props.color),
    '--button-background-color': rootStyles.getPropertyValue(props.backgroundColor),
    '--text-color': rootStyles.getPropertyValue(props.textColor)
  };
});

</script>
<style lang="scss">
@import '@/assets/styles/helpers/variables';

.button {
  padding: 2rem;
  border-radius: 1rem;
  cursor: pointer;
  border: 1px solid;
  font-family: 'Inter Tight';
  color: var(--text-color);
  background-color: var(--button-background-color);
  border-color: var(--button-color);
}
</style>

<Button :color="'--error'" :backgroundColor="'--pink'" :textColor="'--white'">Кнопка</Button>

БЛОГ НА HUSL

Передача SASS переменных через props во vue 3. Возможно ли это

Ответы (1 шт):