Vue中关于Scoped CSS 的使用

1. 关于scoped

在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<style scoped> 
    .red {  color: red; } 
</style>

其原理是通过使用 PostCSS 来实现以下转换：

<template> 
    <div class="red" data-v-f3f3eg9>hi</div> 
</template>
<style> 
    .red[data-v-f3f3eg9] { 
        color: red; 
    } 
</style>

2. 混用本地和全局

<style> 
    /* 全局样式 */ 
</style>
<style scoped>  
    /* 本地样式 */ 
</style>

3. vue的深度作用选择器

要注意scoped的作用域，因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器。

深度作用选择器：使用 >>> 操作符可以使 scoped 样式中的一个选择器能够作用得“更深”，例如影响 子组件

<style scoped> 
    #app >>> a {  color: red } 
</style>

4.sass之类的预处理器如何解决“>>>”

Sass 之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符 取而代之

<style scoped lang="scss"> 
    #app { 
        /deep/ a {   
            color: rgb(196, 50, 140) 
        } 
        ::v-deep a {   
            color: rgb(196, 50, 140) 
        }  
    } 
</style>