看了《 less 的 & 詳解 https://www.jianshu.com/p/127b0974cfc3》，對於此文再做一別補充
常見用法：
直接巢狀寫法
.a{
color:red;
.b{
color:blue;
}
}
這一類是最常見的
這個一類是我們日常所常見的
&的高階用法
作為內層選擇器表示對父選擇器的引用
父選擇器運算子 & 的作用，就是讓當前的選擇器和父級選擇器，按照特定的規則進行連線。它有多種用途，比如建立重複的類名：
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
輸出程式碼
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
改變輸出順序-反轉巢狀的順序
將 & 放在一個選擇器的後面，來改變選擇器的順序，將當前選擇器排列到最前面。如：
.demo-title {
.demo & {
font-size: 20px;
}}
輸出
.demo .demo-title {
font-size: 20px;
}
借代父選擇器
簡單的
a { color:#000;
&:hover {
text-decoration:none;
}
&:focus {
color:#999;
}
}
這個資料就不用多說了吧
.link {
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
輸出
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}
需要注意的是所有的父選擇器，而不是僅僅重複最近的祖先選擇器。請看以下例子：
.grand {
.parent {
& > & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
}
輸出
grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}
用在選擇器中的&還可以反轉巢狀的順序並且可以應用到多個類名上。
.meng, .long {
div & {
color: black;
}
& + & {
color: red;
}
& ~ & {
color: red;
}
}
編譯後程式碼
div .meng,
div .long {
color: black;
}
.meng + .meng,
.meng + .long,
.long + .meng,
.long + .long {
color: red;
}
.meng ~ .meng,
.meng ~ .long,
.long ~ .meng,
.long ~ .long {
color: red;
}
將 & 用在一個使用逗號分隔的選擇器列表中，可以產生列表中所有選擇器的所有可能的排列，這被稱作組合爆炸。如：
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
述列表中有 4 個選擇器，列表中所有選擇器的所有可能的排列，將有 16 種可能。編譯後的CSS程式碼為：
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}
BEM 的命名規範如下：
/* 塊即是通常所說的 Web 應用開發中的元件或模組。每個塊在邏輯上和功能上都是相互獨立的。 */
.block {
}
/* 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中巢狀其他元素。 */
.block__element {
}
/* 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之後，會有不同的外觀 */
.block--modifier {
}
透過 bem 的命名方式，可以讓我們的 css 程式碼層次結構清晰，透過嚴格的命名也可以解決命名衝突的問題，但也不能完全避免，畢竟只是一個命名約束，不按規範寫照樣能執行。
實際專案，自己定好規則即可
@bk-prefix: andy;
.@{bk-prefix}-divider { //.andy--divider
&--info{ // .andy--divider--info{
&-left{ // .andy--divider--info-left{
}
}
&_vertical{ // .andy--divider_vertical{
}
&_horizontal{ // .andy--divider_horizontal{
}
.andy-divider-horizontal {
&-left { // .andy--divider_horizontal .andy--divider--info-left{
left: 2em;
}
&-right { // .andy--divider_horizontal .andy--divider--info-right{
right: 2em;
}
}
.andy-divider-vertical & { // .andy--divider_vertical .andy--divider--infol{
padding: 20px 0;
}
}
參考文章：
LESS詳解之巢狀(&) https://blog.csdn.net/lee_magnum/article/details/12950407
轉載本站文章《post-css/less/sass樣式巢狀與命令之"&"符號—BEM》,
請註明出處：https://www.zhoulujun.cn/html/webfront/style/postCss/2019_1220_8684.html