📌  相关文章
📜  LESS-嵌套规则

📅  最后修改于: 2020-10-22 07:03:16             🧑  作者: Mango

 

描述

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

例

以下示例演示了LESS文件中嵌套规则的使用-

Nested Rules
      
   
   
   
      

         
First Heading

         
LESS is a dynamic style sheet language that extends the capability of CSS.

         

            
Second Heading

            
LESS enables customizable, manageable and reusable style sheet for web site.

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

较少嵌套规则