LESS 中的嵌套规则是什么？

我们可以很容易地在 LESS 中定义嵌套规则。嵌套规则被定义为一组 CSS 属性，这些属性允许一个类的属性用于另一个类，并包含类名作为其属性。在 LESS 中，您可以使用类或 ID 选择器以与 CSS 样式相同的方式声明 mixin。它可以存储多个值，并且可以根据需要在代码中重用。

人们一定听说过嵌套这个词，可能是指旧表格设计网站中的嵌套表格。对于 LESS，我们基本上是在做相同的概念，但在其他规则中嵌套 LESS 规则。下面的例子将演示这种在 LESS 中嵌套的概念。

示例 1：

HTML

  

    

  

    

        
Example of less
  
        
We will discuss LESS here.
  
        

            
Geeks for Geeks portal
  
            

                Nested rules are clever about
                handling selector lists 
            
        
    

  

接下来我们将创建style.less文件。

.container {
    h1 {
        font-size: 24px;
        color: red;
    }
    p {
        font-size: 24px;
        color: blue;
    }
    
    .myclass {
        h1 {
            font-size: 24px;
            color:red;
        }
        p {
            font-size: 24px;
            color:blue;
        }
    }
}

我们可以使用以下命令将 style.less文件编译为 style.css。

lessc style.less style.css

执行完上面的命令后， style.css文件就用下面的代码创建了。

.container h1 {
    font-size: 24px;
    color: red;
}
.container p {
    font-size: 24px;
    color: blue;
}
.container .MyClass h1 {
    font-size: 24px;
    color: red;
}
.container .MyClass p {
    font-size: 24px;
    color: blue;
}

输出：

示例 2：在此示例中，我们将使用 LESS JavaScript 文件，该文件将使浏览器自动将 LESS 代码编译为 CSS。但是，不建议在生产中使用它，因为它可能会影响网站的性能。

HTML

  

    
          
    
    

  

    
        
            GeeksforGeeks
        
        
            LESS Nesting example!
        
    

  

接下来我们将创建style.less文件。

.Important {
    color: green;

    .Different {
        font-size: 40px;;
    }
    
    .Nestedrules {
        font-size: 20px;
    }
}

浏览器会自动将 LESS 代码编译为 CSS，并且可以在浏览器中查看生成的页面。最终编译的 CSS 将如下所示。

.Important {
    color: green;
}
.Important .Different {
    font-size: 40px;
}
.Important .Nestedrules {
    font-size: 20px;
}

输出：