Less巢狀規則


這是一組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檔案,得到如下輸出顯示。