vue中scope对sass和less的影响，深度作用选择器 /deep/ (element-ui的样式改变不了)

前提，我写了一段css代码，发现怎么都没有效果，但是直接在浏览器上改却很明显

<style  lang="scss" type="text/scss" scoped>
  #details span.ant-input-group-addon{
    width:120px ;
  }
</style>

后来，发现取消了scope就好了，于是仔细去查了下

使用 scope 属性描述 <div> 元素的样式：

<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>这个标题是红色的</h1>
<p>这个段落是蓝色的。</p>
</div>
scoped 属性是一个布尔属性。

如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

原来是使用 scoped 后，父组件的样式将不会渗透到子组件中。 于是发现vue模板中没有这个标签，是其子模板拥有的，后来又去查了些资料，发现 如果scope中需要渗透到子组件中，可以添加 -深度作用选择器 /deep/，在sass和less中都可以使用

<style  lang="scss" type="text/scss" scoped>
  #details  /deep/ span.ant-input-group-addon{
    width:120px ;
  }
</style>

<style  scoped  type="text/less" lang="less">
  #details {
    /deep/ span.ant-input-group-addon{
      width:120px ;
    }
  }

也可以使用 >>>，不过我测试发现只能用在sass中，less报错

<style  lang="scss" type="text/scss" scoped>
  #details >>>span.ant-input-group-addon{
    width:120px ;
  }
</style>

ps:我也是刚刚学习，如有错误，请指出，立即改正