使用scss的extend 更好的继承样式 简化代码

<template>
  <div style="margin:50px">
    <p class="styleA">小</p>
    <h2 class="styleB">大</h2>
  </div>
</template>
<style  lang="scss">
.styleA {
  color: palegreen;
  height: 50px;
  width: 50px;
  background-color: palevioletred;
  font-size: 30px;
}
.styleB {
  @extend .styleA;
}
</style>

　　

 

如果styleB还想加其他的样式，直接在styleB样式下边加即可