Less嵌套详解

嵌套用于使你的代码遵循某种视觉层次。它使你的代码变得简单, 简洁, 复杂。嵌套时必须非常小心, 因为过度嵌套的规则可能会导致复杂性, 并且难以维护。

让我们举个例子。假设你必须为一个网站编写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嵌套可帮助你以嵌套的方式编写上述CSS代码, 而无需重复编写段落代码。

等效减文件：

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

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

// Less for Paragraph
// ------------------
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;
 } 
}