Less 嵌套規(guī)則

2020-10-21 15:52 更新

描述

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


例子

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

<html>
<head>
   <title>Nested Directives</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="container">
   <h1>Example using Nested Directives</h1>
   <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>

接下來，創(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教程

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號