LESS规范

Tips

阿里的前端开发手册

代码组织

将公共 less 文件放置在 style/less/common 文件夹 例: // color.less,common.less

按以下顺序组织

• @import;
• 变量声明;
• 样式声明; @import "mixins/

@import "mixins/size.less";
@default-text-color: #333;
.page {
  width: 960px;
  margin: 0 auto;
}

避免嵌套层级过多

• 将嵌套深度限制在 3 级。对于超过 4 级的嵌套，给予重新评估。这可以避免出现过于详实的 CSS 选择器。
• 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于 20 行的嵌 套规则出现。

正例

.main-title {
  .name {
    color: #fff;
  }
}

反例

.main {
  .title {
    .name {
      color: #fff;
    }
  }
}