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;