<!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>

接下來，創(chuàng)建文件 style.less

style.less

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}

你可以編譯extend.less文件使用以下命令來生成extend.css：

lessc extend.less extend.css

接著執(zhí)行上面的命令，它會自動創(chuàng)建 style.css文件，下面的代碼：

style.css

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

輸出結果

讓我們來執(zhí)行以下步驟，看看上面的代碼工作：

保存上面的HTML代碼在 extend_syntax.html文件。
在瀏覽器中打開該HTML文件，得到如下輸出顯示。

擴展語法

擴展放入規(guī)則集或連接到一個選擇器。它類似于包含一個或多個類，它們是由逗號分隔的偽類。使用可選的關鍵字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>

接下來，創(chuàng)建文件 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

接著執(zhí)行上面的命令，它會自動創(chuàng)建 style.css文件，下面的代碼：

style.css

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

輸出結果

讓我們來執(zhí)行以下步驟，看看上面的代碼工作：

保存上面的HTML代碼在 extend_syntax.html文件。
在瀏覽器中打開該HTML文件，得到如下輸出顯示。

下表列出了擴展語法，您可以在LESS 使用它的所有類型：

S.N.	類型和說明
1	擴展附加到選擇器擴展連接到一個選擇器，類似于具有選擇器作為參數(shù)的偽類。
2	擴展內(nèi)部規(guī)則集 &:extend延長(選擇器)語法可以在規(guī)則集主體里面放。
3	擴展嵌套選擇器嵌套選擇器使用擴展選擇器匹配。
4	使用擴展精確匹配默認情況下擴展外觀選擇器之間的精確匹配。
5	nth表達式第n個表達式的形式在某種程度上很重要，否則，它對待選擇器將不同。
6	當關鍵字 all 被最后確定在擴展參數(shù)，那么LESS匹配選擇器作為另一個選擇器部分。
7	選擇器插值擴展在多大程度上可以被連接到內(nèi)插選擇器。
8	作用域及擴展@media 擴展匹配選擇器只存在相同的媒體聲明中。
9	重復檢測它不能檢測選擇器的重復。

下面是擴展類型的用例：

S.N.	類型和說明
1	經(jīng)典用例在Less中經(jīng)典的用例是用來避開添加基類。
2	減小CSS大小擴展用于移動選擇器盡量要使用屬性，這有助于降低CSS生成代碼。
3	合并風格/更高級的混入使用擴展我們可以結合特定選擇器相同的風格到其他選擇器。

上一篇：Less @arguments變量下一篇：Less安裝

S.N.	類型和說明
1	擴展附加到選擇器擴展連接到一個選擇器，類似于具有選擇器作為參數(shù)的偽類。
2	擴展內(nèi)部規(guī)則集 &:extend延長(選擇器)語法可以在規(guī)則集主體里面放。
3	擴展嵌套選擇器嵌套選擇器使用擴展選擇器匹配。
4	使用擴展精確匹配默認情況下擴展外觀選擇器之間的精確匹配。
5	nth表達式第n個表達式的形式在某種程度上很重要，否則，它對待選擇器將不同。
6	當關鍵字 all 被最后確定在擴展參數(shù)，那么LESS匹配選擇器作為另一個選擇器部分。
7	選擇器插值擴展在多大程度上可以被連接到內(nèi)插選擇器。
8	作用域及擴展@media 擴展匹配選擇器只存在相同的媒體聲明中。
9	重復檢測它不能檢測選擇器的重復。

S.N.	類型和說明
1	經(jīng)典用例在Less中經(jīng)典的用例是用來避開添加基類。
2	減小CSS大小擴展用于移動選擇器盡量要使用屬性，這有助于降低CSS生成代碼。
3	合并風格/更高級的混入使用擴展我們可以結合特定選擇器相同的風格到其他選擇器。