css中的&

2021-11-10

前端

要在座的人都停止了说话的时候,有了机会,方才可以谦逊地把问题提出,向人学习。—— 约翰·洛克

今天看到一种css写法:

1
2
3
4
5
6
7
8
9
/deep/ .message-list {
flex: 1;

.message-item {
&-text {
position: absolute;
}
}
}

/deep/我们之前博客提过了,嵌套写法很简单,今天聊聊&这个父选择器

sass中文文档提到了这个父选择器

上方的&-text其实就表示.message-item-text

1
2
3
4
5
.message-item {
&-text {
position: absolute;
}
}

编译后为:

1
2
3
4
5
.message-item {
.message-item-text {
position: absolute;
}
}