scss使用? less使用@ css官方使用--

例子:

// html
<div class="grand">
  grand
  <div class="parent">
  father
  <div class="child">
    child
  </div>
</div>
</div>

// css

:root{
  --body-father:purple
}
.grand{
  color:var(--body-father);
  --grand-color:red
}
.parent{
  color:var(--grand-color);
  --parent-color:blue
}
.child {
  color: var(--parent-color);
    --child-color:green
} 

Vue中使用css变量:

最新版的vue3目前使用的是v-bind绑定data中的变量

  <template>
  <div class="text">vue</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      font: {
        size: '4em'
      }
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
  font-size: v-bind('font.size');
}
</style>

爬。