使用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樣式下邊加即可