从你走进我心里的那一刻，我就没打算再把你放出去。下面的文章分两节，一节一节的消化吧。
铺垫
在使用scss语法进行嵌套的时候要先看看这段scss代码：
.text {
color: blue;
:hover { color: red }
}
如此先了解:hover这个伪类的使用：
.text:hover{
color:red
}
应该要知道这么写才是让这个伪元素生效在text上的写法【不用嵌套的形式】。可见下图（鼠标悬浮在文本上）：
可以看见文本是变了颜色的。
你可能会想，既然这样可以的话，为什么我们又要用scss的嵌套呢？
其实原因很简单，看下面的代码：
<div id="app">
<p class="text">
你最好啦～
<a>嘿嘿</a>
</p>
</div>
看p标签下又嵌套了个a标签，这时候我们又要给a标签写蓝色文字样式：
.text:hover{
color:red
}
.text{
a{
color: blue;
}
}
就下面这样了：
虽然有效果，单玩意里面很多层呢？这么写肯定是不好的，所以我们就有了嵌套写法：
.text{
:hover{
color:red;
}
a{
color: blue;
}
}
哎哟～鼠标悬浮上去：
没有红色？问题出在哪呢？
抢答：我知道，问题是因为:hover应该是直接作用在text上，这种嵌套实际是作用在某个子元素上，如果正确浏览器应该解析成.text:hover。
嗯嗯，是这样，我们来看看刘浏览器的解析：【审查元素-选中text-勾选hover，我们发现并没有相关css】
所以这个时候，怎么办呢？来，上才艺：&
.text{
&:hover{
color:red;
}
a{
color: blue;
}
}
再一看
有了，
都有了。
出来了，我们分析一下：
.text:hover是作用在了class为text的元素上，在.text下&:hover{color:red;}，是不是可以理解为，&是让该样式作用在.text上。
那么怎么切换class呢？
<p class="good active">
我是一个像漂亮妹妹的标签
</p>
.good{
color:red;
&.active{
color: blue;
}
}
这样会显示什么颜色呢？红色还是蓝色呢？
接下来就是见证奇迹：
没错，他是蓝色。看见了没，他们在是作用的同一个标签，单用了&的权重大于没用的，为什么呢，因为&.active会被浏览器解析为
.good.active {
color: blue;
}
相当于去啊种多了一个class
优先级问题，这就是为什么可以动态设置class的原因了，在vue中完全可以通过动态绑定class来实现切换。这个可以实现那个会员套餐的升级写法：看实操。
<template>
<div id="app">
<div class="item" @click="activeIndex = index" :class="activeIndex === index ?'active':''" v-for="(item,index) in vipList" :key="index">
<p>{{item.title}}，{{item.price}}</p>
</div>
</div>
</template>
<script>
//原理
//通过&的权重高来覆盖样式
//click切换套餐，选中的套餐添加active的class
//有了active这个class，css中的&.class就会生效
export default {
name: 'app',
data () {
return {
vipList:[{title:'套餐1',price:20},{title:'套餐2',price:30},{title:'套餐2',price:40}],//套餐列表
activeIndex:0,//已选中套餐
}
},
}
</script>
<style lang="scss">
.item{
cursor: pointer;
border: 1px solid #999;
p{
color: blue;
}
&.active{
border: 1px solid red;
p{
color: red;
}
}
}
</style>
原理在代码块里了。
最后，你是最棒的哦，相信自己，月薪破万不是梦。
