描述

它是一組 CSS 屬性，允許將一個(gè)類的屬性用于另一個(gè)類，并且包含類名作為其屬性。 在 LESS 中，可以使用類或 id 選擇器以與 CSS 樣式相同的方式聲明 mixin。 它可以存儲(chǔ)多個(gè)值，并且可以在必要時(shí)在代碼中重復(fù)使用。

例子

下面的例子演示了在 LESS 文件中使用嵌套規(guī)則：

   
   


   
Example using Nested Directives
   
LESS enables customizable, manageable and reusable style sheet for web site.

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

style.less

.container{ h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } .myclass{ h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } } }

您可以使用以下命令將 style.less 文件編譯為 style.css：

lessc style.less style.css

接下來執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

style.css

.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}
.container .myclass h1 {
  font-size: 25px;
  color: #E45456;
}
.container .myclass p {
  font-size: 25px;
  color: #3C7949;
}

輸出

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

• 將上述 html 代碼保存在 nested_rules.html 文件中。

• 在瀏覽器中打開此 HTML 文件，將顯示如下輸出。

---

相關(guān)教程

CSS教程

名稱欄目：創(chuàng)新互聯(lián)less教程：Less 嵌套規(guī)則
鏈接分享：http://www.fisionsoft.com.cn/article/cdpghod.html