初步知道scss 簡化css複雜層級

簡介：今天在調試前端樣式的時候，el-button組件位置須要調整而且 須要改字體大小 。直接上了一個 font-text：20px; 發現沒做用，谷歌調試發現並未做用到組件裏的<span></span>標籤上，因而須要深刻到組件中的span標籤加樣式

<span class="tree-append-delete">
   <el-button size="mini" type="text" on-click={ () => this.append(data) }> + </el-button>
   <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }> - </el-button>
</span>

//css 
<style scoped>
　.tree-append-delete {
　　　margin-left: 40px;
  }
  .tree-append-delete > span{
　　  font-size: 20px;
  }
</style>

//引入scss以後的簡便寫法
<style lang="scss" scoped>
　.tree-append-delete {
　　　margin-left: 40px;
　　  span {
　　　　　font-size: 20px;　
　　　}
  }
</style>

總結：scss 能夠簡化咱們定義css時候 定位重複的繁瑣代碼