背景介绍
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。使用less我们就会经常用到&，它的用途有很多，今天写组件的时候遇到了几个问题所以整理一下
& 作用介绍
内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。同时用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上
通过🌰解析&引用父级的多个使用场景
首先我们先写一段html结构
// 这是一段pug模版语法
.demo
p.demo-title title
p.demo-desc
span.demo-desc-font 2333
img.demo-desc-img(src='')
解析之后会被编译成
<div class="demo">
<p class="demo-title">title</p>
<p class="demo-desc">
<span class="demo-desc-font">2333</span>
<img src="" class="demo-desc-img">
</p>
</div>
下面我们需要给这段结构写一段css的样式，我们通过less来写。
- 当前选择器的伪类或者伪元素。如 :hover :focus :after :before等
.demo {
&:after {
content: '.';
display: block;
background-color: aquamarine;
}
}
上面的代码编译后会变成
.demo:after {
content: '.';
display: block;
background-color: aquamarine;
}
- 作为内层选择器表示对父选择器的引用。这里要注意在写less的嵌套的时候会有差异
.demo {
&-title {
text-align: center;
}
}
上面这段代码会被编译成
.demo-title {
text-align: center;
}
上面的&引用了.demo，注意这里虽然是嵌套的写法但仅代表选择器的引用而不是css的嵌套关系，和下面的代码有css层级的不同
.demo {
.demo-title {
text-align: center;
}
}
上面这段代码会被编译成
.demo .demo-title {
text-align: center;
}
明显可以看出上面&的写法少一个.demo的层级，这样就需要注意css的优先级问题。如果要使上面的写法得到和下面的一样的结果就需要增加一个&的引用，即
.demo {
& &-title {
text-align: center;
}
}
解析后则会增加一个.demo的层级
.demo .demo-title {
text-align: center;
}
这说明在一个选择器中，& 可以重复出现多次，这样，就可以多次引用父选择器而不必重复它的名字。比如
- && 表示.demo.demo
- & & 表示.demo .demo
- &, & 表示.demo, .demo
这样的写法需要注意的是它重复所有的祖先选择器，而不是仅仅重复最近的父选择器。例如：
.demo {
.demo-desc {
&-font {
color: #fff;
}
}
}
解析之后会变成
.demo .demo-desc-font {
color: #fff;
}
高级用法
反转嵌套的顺序并且可以应用到多个类名上。上例子:
.demo-title {
.demo & {
font-size: 20px;
}
}
上面的代码解析后则会变成
.demo .demo-title {
font-size: 20px;
}
后面会持续更新。。。。
