【CSS】在SCSS中使用变量

一、应用场景

一个页面中某个样式被多次使用，且该样式存在被经常更改的可能性，如果一个一个的改的话会比较麻烦

二、方法：使用$定义变量

<template>
  <div class="father">
    <p>
      今天是2022年12月8日，距离发工资还有<span>2天</span>，距离周末还有<span>2天</span>，距离元旦还有<span>24天</span>，距离过年还有<span>45天</span>。
    </p>
    <div>周末计划：<span>爬山</span></div>
    <div>元旦计划：<span>家里蹲</span></div>
    <div>过年计划：<span>屯膘</span></div>
  </div>
</template>

<script>
export default {
  name: 'DemoHome'
}
</script>

<style lang="scss" scoped>
.father {
  $title-color: #f00;
  $text-color: #09f9fd;
  span {
    color: $title-color;
  }
  div span{
    color: $text-color;
  }
}
</style>