欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

Less 嵌套規(guī)則

描述

它是一組 CSS 屬性，允許將一個類的屬性用于另一個類，并且包含類名作為其屬性。 在 LESS 中，可以使用類或 id 選擇器以與 CSS 樣式相同的方式聲明 mixin。 它可以存儲多個值，并且可以在必要時在代碼中重復(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í)行上面的命令，它將用下面的代碼自動創(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教程