一、认识“&”
在css中，“&”符号通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素.
二、“&”的用法
1、&- ：连接父元素和子元素的类名
用法：
.btn {
&-primary {
background-color: #007bff;
color: #fff;
}
}
编译出来的结果是在btn后面拼接了类名:
.btn-primary {
background-color: #007bff;
color: #fff;
}
2、&. ：连接父元素和子元素的类名
用法：
.btn {
&.primary {
background-color: #007bff;
color: #fff;
}
}
编译出来的结果是同一个元素，有两个类名，两个类名之间没有空格：
.btn.primary {
background-color: #007bff;
color: #fff;
}
3、&::before和&::after ：表示在当前元素的前面或后面插入伪元素
btn {
&::before {
content: "before";
}
&::after {
content: "after";
}
}
4、&:hover和&:focus：表示鼠标悬停或聚焦时应用的样式
btn {
&:hover {
background-color: #eee;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px #007bff;
}
编译后的结果是当用户悬停在 button 元素上时，应用 background-color: #eee; 样式；当用户聚焦在 button 元素上时，应用 outline: none; box-shadow: 0 0 0 2px #007bff; 样式。
5、&[attribute=value] ：表示选择具有特定属性和属性值的元素
用法：
btn {
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
&[type="submit"] {
background-color: #007bff;
color: #fff;
}
}
编译出来的结果是选择具有 disabled 属性的 button 元素，并应用 opacity: 0.5; cursor: not-allowed; 样式；同时选择具有 type="submit" 属性的 button 元素，并应用 background-color: #007bff; color: #fff; 样式：
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
}
6、&:nth-child(n)和&:nth-of-type(n)：表示选择特定位置的子元素或同类型元素
ul {
li {
&:nth-child(odd) {
background-color: #f7f7f7;
}
&:nth-of-type(even) {
color: #007bff;
}
}
}
7、&:first-child 选择器用来匹配父元素中第一个子元素。
&:last-child 选择器用来匹配父元素中最后一个子元素。
