less 嵌套规则——迹忆客-ag捕鱼王app官网

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

示例

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

nested_rules.html

   
      
      
   
   
   
      

         
         
less is a dynamic style sheet language that extends the capability of css.
         

            
            
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 文件，将显示以下输出。