Less – 嵌套(Nesting)

嵌套可以让代码有层次结构，代码更清晰、简单。但过多嵌套也会让代码复杂性增加，难以维护，必须把握好度。

举例说明，假设我们有以下的css代码，定义了三个段落的样式：标准段落、介绍段落和突出显示段落。

css代码:

p {  
    color: #232323;  
    font-family: Helvetica, Arial, sans-serif;  
    font-size: 14px;  
    line-height: 21px;  
}  

p .intro {  
    font-variant: small-caps;  
    font-size: 16px;  
    line-height: 24px;  
}  

p .highlight {  
    color: #00214D;  
    font-weight: bold;  
}

等价的less代码：

@textColor: #232323;  
@textHighlight: #00214D;  
@fontFamily: Helvetica, Arial, sans-serif;  
@fontSize: 14px;  
@lineHeight: 21px;  

@introSize: 16px;  
@introLineHeight: 24px;  
@introFontVariant: small-caps;  

p {  
    color: @textColor;  
    font-family: @fontFamily;  
    font-size: @fontSize;  
    line-height: @lineHeight;  

    .intro {  
        font-variant: @introFontVariant;  
        font-size: @introSize;  
        line-height: @introLineHeight;  
    } 

    .highlight {  
        color: @textHighlight;  
        font-weight: bold;  
    }   
}

可以看到，使用嵌套方式，去除了重复的p，代码也更有层次了。