less中&的一點方法

前言
在寫vue組件的時候，css使用的是less。有一個樣式，老是出不來，後來查了下是本身對於less的用法不瞭解。下面直接上代碼。

當作父級類

.head{
  height: 100px;
  width: 100px;
  border: 1px solid gainsboro;
  background-color: #000000;

  .content{
    background-color: #fff;
  }

  &.body{
    background-color: #72cc26;
  }

}

這段less編譯以後爲:

.head {
  height: 100px;
  width: 100px;
  border: 1px solid gainsboro;
  background-color: #000000;
}
.head .content {
  background-color: #fff;
}
.head.body {
  background-color: #72cc26;
}

這裏咱們能夠看到在類前面添加了&以後，編譯以後的css變爲且的關係，而沒有使用&的css是父子的關係。

這裏須要注意.a.b和.a .b之間的區別，.a.b 是且的關係意思就是2者必須都具有，而.a .b是上下級，父子關係

<!--.a.b-->
<div class="a b"></div>
<!--.a .b-->
<div class="a">
    <div class="b"></div>
</div>

改變選擇器的順序

.head{
  height: 100px;
  width: 100px;
  border: 1px solid gainsboro;
  background-color: #000000;

  .content{
    background-color: #fff;
  }

  .content &{
    background-color: #fff;
  }

}

編譯後:

.head {
  height: 100px;
  width: 100px;
  border: 1px solid gainsboro;
  background-color: #000000;
}
.head .content {
  background-color: #fff;
}
.content .head {
  background-color: #fff;
}

組合排列

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

編譯後:

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;
}

&會把全部的可能性都排列出來。