📅 最后修改于: 2021-01-06 04:40:53 🧑 作者: Mango
嵌套用于使您的代码遵循某种视觉层次。它使您的代码变得简单，简洁，复杂。嵌套时必须非常小心，因为过度嵌套的规则可能会导致复杂性，并且证明难以维护。
让我们举个例子。假设您必须为一个网站编写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;
}
较少的嵌套可帮助您以嵌套的方式编写上述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;
}
}