前端编码规范之less

less编码规范

由于 Less 可以看做是 CSS 的超集，因此所有适用于 CSS 的规约均适用于 Less。故而其中重复的规约部分不再赘述。

@import

• @import 语句必须声明于文件的头部位置。

// bad
.page {
  width: 960px;
  margin: 0 auto;
}

@import "est/all.less";

// good
@import "est/all.less";

.page {
  width: 960px;
  margin: 0 auto;
}

变量定义

• 文件全局的变量在全局头部次于 @import 的位置声明；局部变量在块的头部位置声明。

// bad
.page {
  width: @width;
  margin: 0 auto;
  
  @width: 960px;
}

// good
.page {
  @width: 960px;
    
  width: @width;
  margin: 0 auto;
}

• 变量命名必须使用减号 - 连接的形式 如：@foo-bar，不得使用驼峰形式 如：@fooBar。

// bad
@sidebarWidth: 200px;

// good
@sidebar-width: 200px;

注意：Less 的变量值总是以同一作用域下最后一个同名变量为准，务必注意后面的设定会覆盖所有之前的设定。

Mixins

• 使用逗号 , 来分隔参数

  在早期 less 仅使用逗号 , 来分隔参数，后来支持使用分号 ;，为了保证对以往代码的兼容和统一，均使用逗号 , 来分隔。

// bad
.size(@w; @h) {
  width: @w;
  height: @h;
}

// good
.size(@w, @h) {
  width: @w;
  height: @h;
}

• mixin 名称后必须加上括号 ()

  在定义 mixin 时，如果 mixin 本身并不作为一段独立的 CSS 描述，而只是给其他 CSS 来调用，
  那么在 mixin 名称后必须加上括号 ()，以防止它被多此一举地输出到 CSS 文件中，甚至污染全局样式。

  在调用 mixin 时，即使不用传参数，后面也必须加上括号 ()。

// bad
.big-text {
  font-size: 2em;
}

h3 {
  .big-text;
}

// good
.big-text() {
  font-size: 2em;
}

h3 {
  .big-text();
}

• mixin 名称和括号 () 间不保留空格。在用逗号 , 分隔参数列表时，逗号 , 后保留一个空格，前不留空格。

// bad
.box {
  .size(30px,20px);
  .clearfix ();
}

// good
.box {
  .size(30px, 20px);
  .clearfix();
}

• mixin 命名使用减号 - 连接

  由于 mixin 部分采用 class 名称定义，因此 mixin 命名同 class 命名一样，使用减号 - 连接的形式 @foo-bar，不得使用驼峰形式 @fooBar。即使是仅用于函数调用的 mixin，也如此。

// bad
.bigText() {
  font-size: 2em;
}

// good
.big-text() {
  font-size: 2em;
}

继承

• 使用继承时，如果在声明块内书写 :extend 语句，必须写在开头：

// bad
.sub {
  color: red;
  &:extend(.mod all);
}

// good
.sub {
  &:extend(.mod all);
  color: red;
}

四则运算符

• 四则运算符 + - * / 左右保留一个空格。

// bad
@a: 200px;
@b: (@a+100px)*2;

// good
@a: 200px;
@b: (@a + 100px) * 2;