嵌套用于使你的代码遵循某种视觉层次。它使你的代码变得简单, 简洁, 复杂。嵌套时必须非常小心, 因为过度嵌套的规则可能会导致复杂性, 并且难以维护。
让我们举个例子。假设你必须为一个网站编写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代码, 而无需重复编写段落代码。
【Less嵌套详解】等效减文件：
@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;
} }
