Less擴充套件all

當關鍵字"all"最後被確定在擴充套件引數，然後Less匹配是選擇器作為另一個選擇器部分。它匹配的選擇器部分將擴充套件使一個新的選擇器更換。

範例

下面的例子演示了使用 "all" 關鍵字在Less檔案：

extend_all.html

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="container">
      <h3>Welcome to Yiibai Yiibai</h3>
      <div class="style">
      <ul class="nav">
         <li>SASS </li>
         <li>LESS</li>
      </ul>
      </div>
   </div>
</body>
</html>

接下來，建立檔案 style.less

style.less

.style.nav,
.nav h3 {
  color: orange;
}
.nav {
  &:hover {
    color: green;
  }
}
.container:extend(.nav all) {}

你可以編譯 style.less 檔案使用以下命令來生成 style.css 檔案：

lessc style.less style.css

接著執行上面的命令，它會自動建立 style.css 檔案，下面的程式碼：

style.css

.style.nav,
.nav h3,
.style.container,
.container h3 {
  color: orange;
}
.nav:hover,
.container:hover {
  color: green;
}

輸出

讓我們來執行以下步驟，看看上面的程式碼工作：

儲存上面的html程式碼在 extend_all.html 檔案。
在瀏覽器中開啟該HTML檔案，輸出如下得到顯示。