首页 > 代码库 > Less 编码规范详解
Less 编码规范详解
因为自己最近写css用的比较多，整理了一份less规范， 希望对大家入门less有帮助。
代码组织
代码按如下形式按顺序组织：
@import
变量声明
样式声明
// ?
@import "est/all.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
@import 语句
@import 语句引用的文件写在一对引号内，.less 后缀不省略（与引入 CSS 文件时的路径格式一致）。引号使用 ’ 和 " 均可。
// ?
@import ’est/all’;
@import "my/mixins.less";
// ?
@import "est/all.less";
@import "my/mixins.less";
空格
属性、变量
选择器和 { 之间保留一个空格。
属性名后的冒号（:）与属性值之间保留一个空格，冒号前不保留空格。
定义变量时冒号（:）与变量值之间保留一个空格，冒号前不保留空格。
在用逗号（,）分隔的列表（Less 函数参数列表、以 , 分隔的属性值等）中，逗号后保留一个空格，逗号前不保留空格。
// ?
.box{
@w:50px;
@h :30px;
width:@w;
height :@h;
color: rgba(255,255,255,.3);
transition: width 1s,height 3s;
}
// ?
.box {
@w: 50px;
@h: 30px;
width: @w;
height: @h;
transition: width 1s, height 3s;
}
运算
+ / - / * / / 四个运算符两侧保留一个空格。+ / - 两侧的操作数有相同的单位，如果其中一个是变量，另一个数值书写单位。
// ?
@a: 200px;
@b: (@a+100)*2;
// ?
@a: 200px;
@b: (@a + 100px) * 2;
混入（Mixin）
Mixin 和后面的空格之间不包含空格。在给 mixin 传递参数时，在参数分隔符（, / ;）后保留一个空格：
// ?
.box {
.size(30px,20px);
.clearfix ();}
// ?
.box {
.size(30px, 20px);
.clearfix();}
选择器
当多个选择器共享一个声明块时，每个选择器声明独占一行。
// ?
h1, h2, h3 {
font-weight: 700;
}
// ?
h1,
h2,
h3 {
font-weight: 700;
}
Class 命名不得以样式信息进行描述，如 .float-right、text-red 等。
省略与缩写
缩写
多个属性定义可以使用缩写时， 尽量使用缩写。缩写更清晰字节数更少。常见缩写有 margin、border、padding、font、list-style 等。在书写时考量缩写展开后是否有不需要覆盖的属性内容被修改，从而带来副作用。
数值
对于处于 (0, 1) 范围内的数值，小数点前的 0 可以（MAY）省略，同一项目中保持一致。
// ?
transition-duration: 0.5s, .7s;
// ?
transition-duration: .5s, .7s;
0 值
当属性值为 0 时，省略可省的单位（长度单位如 px、em，不包括时间、角度等如 s、deg）。
// ?
margin-top: 0px;
// ?
margin-top: 0;
颜色
颜色定义使用 #rrggbb 格式定义，并在可能时尽量缩写为 #rgb 形式，且避免直接使用颜色名称与 rgb() 表达式。
// ?
border-color: red;
color: rgb(254, 254, 254);
// ?
border-color: #f00;
color: #fefefe;
私有属性前缀
同一属性有不同私有前缀的，尽量（按前缀长度降序书写，标准形式写在最后。且这一组属性以第一条的位置为准，尽量按冒号的位置对齐。
// ?
.box {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
其他
可以在无其他更好解决办法时使用 CSS hack，并且尽量使用简单的属性名 hack 如 _zoom、*margin。
可以但谨慎使用 IE 滤镜。需要注意的是，IE 滤镜中图片的 URL 是以页面路径作为相对目录，而不是 CSS 文件路径。
嵌套和缩进
嵌套的声明块前增加一次缩进，有多个声明块共享命名空间时尽量嵌套书写，避免选择器的重复。
但是需注意的是，尽量仅在必须区分上下文时才引入嵌套关系（在嵌套书写前先考虑如果不能嵌套，会如何书写选择器）。
// ?
.main .title {
font-weight: 700;
}
.main .content {
line-height: 1.5;
}
.main {
.warning {
font-weight: 700;
}
.comment-form {
#comment:invalid {
color: red;
}
}
}
// ?
.main {
.title {
font-weight: 700;
}
.content {
line-height: 1.5;
}
.warning {
font-weight: 700;
}
}
#comment:invalid {
color: red;
}
变量
Less 的变量值总是以同一作用域下最后一个同名变量为准，务必注意后面的设定会覆盖所有之前的设定。
变量命名）采用 @foo-bar 形式，不使用 @fooBar 形式。
// ?
@sidebarWidth: 200px;
@width:800px;
// ?
@sidebar-width: 200px;
@width: 800px;
继承
使用继承时，如果在声明块内书写 :extend 语句，写在开头：
// ?
.sub {
color: red;
&:extend(.mod all);
}
// ?
.sub {
&:extend(.mod all);
color: red;
}
混入（Mixin）
在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，加上括号，否则即使不被调用也会输出到 CSS 中。
// ?
.big-text {
font-size: 2em;
}
h3 {
.big-text;}
// ?
.big-text() {
font-size: 2em;
}
h3 {
.big-text();}
如果混入的是本身不输出内容的 mixin，在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className（修改以后是否会影响 HTML）。
// ?
.box {
.clearfix;
.size (20px);}
// ?
.box {
.clearfix();
.size(20px);}
Mixin 的参数分隔符使用 , 和 ; 均可，但在同一项目中保持统一。
命名空间
变量和 mixin 在命名时遵循如下原则：
一个项目只能引入一个无命名前缀的基础样式库（如 est）
业务代码和其他被引入的样式代码中，变量和 mixin 必须有项目或库的前缀
字符串
在进行字符串转义时，使用 ~"" 表达式与 e() 函数均可，但在同一项目中保持一致。
字符串两侧的引号使用 "。
注释
单行注释尽量（SHOULD）使用 // 方式。
// Hide everything
* {
display: none;
}
文章来自：博客园/yinsu12311
Less 编码规范详解