Less巢狀規則 - tw511教學網

這是一組CSS屬性，它允許使用一個類的屬性到另一個類，包括類的名稱作為其屬性。在LESS中，你可以使用class和id選擇同樣的方式作為CSS樣式宣告混入。它可以儲存多個值，並且無論何時可以在必要時程式碼重用。

範例

下面的例子演示了使用Less檔案巢狀的規則：

<html>
<head>
   <title>Nested Rules</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <div class="container">
   <h1>First Heading</h1>
   <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
   <div class="myclass">
   <h1>Second Heading</h1>
   <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </div>
   </div>
</body>
</html>

接下來，產生了 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

接著執行上面的命令，它會自動建立 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;
}

輸出結果

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

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