从你走进我心里的那一刻,我就没打算再把你放出去。下面的文章分两节,一节一节的消化吧。


铺垫

在使用scss语法进行嵌套的时候要先看看这段scss代码:

.text {
color: blue;
:hover { color: red }
}

如此先了解:hover这个伪类的使用:

.text:hover{
color:red
}

应该要知道这么写才是让这个伪元素生效在text上的写法【不用嵌套的形式】。可见下图(鼠标悬浮在文本上):

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_css3

可以看见文本是变了颜色的。

你可能会想,既然这样可以的话,为什么我们又要用scss的嵌套呢?

其实原因很简单,看下面的代码:

<div id="app">
<p class="text">
你最好啦~
<a>嘿嘿</a>
</p>
</div>

看p标签下又嵌套了个a标签,这时候我们又要给a标签写蓝色文字样式:

.text:hover{
color:red
}
.text{
a{
color: blue;
}
}

就下面这样了:

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_css3_02

虽然有效果,单玩意里面很多层呢?这么写肯定是不好的,所以我们就有了嵌套写法:

.text{
:hover{
color:red;
}
a{
color: blue;
}
}

哎哟~鼠标悬浮上去:

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_css3_03

没有红色?问题出在哪呢?

抢答:我知道,问题是因为:hover应该是直接作用在text上,这种嵌套实际是作用在某个子元素上,如果正确浏览器应该解析成.text:hover。

嗯嗯,是这样,我们来看看刘浏览器的解析:【审查元素-选中text-勾选hover,我们发现并没有相关css】

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_嵌套_04

所以这个时候,怎么办呢?来,上才艺:&

.text{
&:hover{
color:red;
}
a{
color: blue;
}
}

再一看

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_权重_05

有了,

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_嵌套_06

都有了。

出来了,我们分析一下:

.text:hover是作用在了class为text的元素上,在.text下​​&:hover{color:red;}​​,是不是可以理解为,&是让该样式作用在.text上。

那么怎么切换class呢?

<p class="good active">
我是一个像漂亮妹妹的标签
</p>
.good{
color:red;
&.active{
color: blue;
}
}

这样会显示什么颜色呢?红色还是蓝色呢?

接下来就是见证奇迹:

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_权重_07

没错,他是蓝色。看见了没,他们在是作用的同一个标签,单用了&的权重大于没用的,为什么呢,因为&.active会被浏览器解析为

.good.active {
color: blue;
}

相当于去啊种多了一个class

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_嵌套_08

优先级问题,这就是为什么可以动态设置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>

scss中的&符号,和利用&切换class,以及会员卡套餐切换样式_权重_09

原理在代码块里了。

最后,你是最棒的哦,相信自己,月薪破万不是梦。