初步知道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时候 定位重复的繁琐代码