描述

它是一组 CSS 属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在 LESS 中，可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

例子

下面的例子演示了在 LESS 文件中使用嵌套规则：

   
   


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

接下来，创建文件 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 文件，将显示如下输出。

---

相关教程

CSS教程

本文标题：创新互联less教程：Less 嵌套规则
当前链接：https://chengdu.cdxwcx.cn/article/cdpghod.html