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,代码也更有层次了。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载