【CSS】關於less中 & 的作用

Vue項目中基本都會使用CSS的預渲染技術，今天我們來看一下 less 中的&符號的作用。

talk is cheap, show me the code.

作用一、當做父級類

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

這段 less 編譯之後的 css 爲

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

• &會把所有的可能性都排列出來，就像求了笛卡兒積

拓寬

less和sass的區別

• less是基於JavaScript，是在客戶端處理

• sass是基於Ruby的，是在服務器端處理

• 關於變量在less和sass中的唯一區別就是 less 用@，sass 用$

• 輸出設置，less沒有輸出設置，sass提供4中輸出選項：nested compact compressed expanded

• sass支持條件語句，可以使用if{}else{},for{}循環等等，而less不支持

參考

less快速入門

less中&的一點方法