Less教學 » Less擴充套件

Less擴充套件

擴充套件是一個 LESS 偽類，它通過擴充套件其他選擇器樣式在一個選擇器使用 :extend 選擇器。

範例

下面的例子演示了在LESS檔案使用擴充套件：

extend_syntax.html 

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
     <h2>Welcome to Yiibai Yiibai</h2>
     <p>Hello, You guys!</p>
   </div>
</body>
</html>
接下來，建立檔案 style.less

style.less 

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}
你可以編譯extend.less檔案使用以下命令來生成extend.css： 
lessc extend.less extend.css
接著執行上面的命令，它會自動建立 style.css檔案，下面的程式碼：

style.css 

h2 {
  font-style: italic;
}
.style,
h2 {
  background: blue;
}

輸出結果

讓我們來執行以下步驟，看看上面的程式碼工作：
  • 儲存上面的HTML程式碼在 extend_syntax.html檔案。
  • 在瀏覽器中開啟該HTML檔案，得到如下輸出顯示。

擴充套件語法

擴充套件放入規則集或連線到一個選擇器。它類似於包含一個或多個類，它們是由逗號分隔的偽類。使用可選的關鍵字all，每個選擇器可以這樣遵循。

範例

下面的例子演示了使用 LESS 檔案的擴充套件語法：

extend_syntax.html 

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
    <h2>Welcome to Yiibai Yiibai</h2>
    <div class="container">
      <p>Hello, You guys!</p>
    </div>
   </div>
</body>
</html>
接下來，建立檔案 style.less

style.less 

.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }
你可以編譯 style.less 檔案使用以下命令來生成 style.css 檔案： 
lessc style.less style.css
接著執行上面的命令，它會自動建立 style.css檔案，下面的程式碼：

style.css 

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

輸出結果

讓我們來執行以下步驟，看看上面的程式碼工作：
  • 儲存上面的HTML程式碼在 extend_syntax.html檔案。
  • 在瀏覽器中開啟該HTML檔案，得到如下輸出顯示。

下表列出了擴充套件語法，您可以在LESS 使用它的所有型別：
S.N.
型別和說明
1
擴充套件連線到一個選擇器，類似於具有選擇器作為引數的偽類。
2
擴充套件內部規則集

&:extend延長(選擇器)語法可以在規則集主體裡面放。
3
擴充套件巢狀選擇器

巢狀選擇器使用擴充套件選擇器匹配。
4
使用擴充套件精確匹配

預設情況下擴充套件外觀選擇器之間的精確匹配。
5 nth表示式
第n個表示式的形式在某種程度上很重要，否則，它對待選擇器將不同。
6 擴充套件"all"
當關鍵字 all 被最後確定在擴充套件引數，那麼LESS匹配選擇器作為另一個選擇器部分。
7
選擇器插值擴充套件

在多大程度上可以被連線到內插選擇器。
8
作用域及擴充套件@media

擴充套件匹配選擇器只存在相同的媒體宣告中。
9
重複檢測

它不能檢測選擇器的重複。
下面是擴充套件型別的用例：
S.N.
型別和說明
1
經典用例

在Less中經典的用例是用來避開新增基礎類別。
2
減小CSS大小

擴充套件用於移動選擇器儘量要使用屬性，這有助於降低CSS生成程式碼。
3
合併風格/更高階的混入
 
使用擴充套件我們可以結合特定選擇器相同的風格到其他選擇器。