Less教程
Less函数

Less嵌套

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;
 } 
}
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4