vue+sass 父组件写的样式或定义的变量，子组件如何也能用到

在Vue中，你可以使用prop和slot来实现父组件样式或变量的共享。具体步骤如下：

1. 在父组件中定义需要共享的变量或样式，例如：

<template>
  <div :class="$style.container">
    <ChildComponent :color="color" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import styles from './styles.module.scss'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      color: 'red'
    }
  },
  computed: {
    $style() {
      return styles
    }
  }
}
</script>

<style module lang="scss">
.container {
  background-color: $bg-color;
}
</style>

2. 在父组件中引入子组件，并将需要共享的变量或样式通过props传递给子组件，例如：

<template>
  <div :style="{ color }">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'black'
    }
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

这样，子组件就可以通过props接收到父组件传递的变量或样式，并使用它们。例如：

<template>
  <div :style="{ color }">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'black'
    }
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

需要注意的是，在子组件中使用父组件的样式时，需要使用 $style 对象来访问父组件的样式模块。