LESS 开发规范

代码组织

代码按如下顺序书写：

@import
变量声明
样式声明

@import './reset.less';
@primary-font-color: #333;
.title {
  color: @primary-font-color;
}

@import语句

@import 语句后的路径路径使用双引号""，引用的文件后缀名不可以省略。

/* bad */
@import ./reset;
/* good */
@import "./reset.less";
@import "./common.css";

混入（Mixin）

定义 mixin 时，如果 mixin 的名称不是一个需要使用的 class，不管有没有参数，必须加上括号。如果有多个参数，使用逗号分隔。

如果混入的是本身不输出内容的 mixin，不管有没有参数，必须在 mixin 后面添加括号。

/* bad */
.big-text {
  font-size: 2em;
}
.border-radius(@x: 10px; @y: 20px;) {
  border-radius: @x @y;
}
h3 {
  .big-text;
  .border-radius;
}

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

.border-radius(@x: 10px, @y: 20px) {
  border-radius: @x @y;
}

h3 {
  .big-text();
  .border-radius(20px, 20px);
}

嵌套

选择器不要嵌套太深（建议控制在三层），理由是：

渲染性能糟糕（每层嵌套渲染时浏览器都要加一层计算）；
优先级混乱（优先级较高，很难覆盖样式）；
样式布局脆弱（页面 html 调整时需要同步调整 class 的嵌套）；

模块化

利用&-完成，模块名可与文件名保持一致

.m-detail {
    background: #fff;
    color: #333;
    &-hd {
        padding: 5px 10px;
        background: #eee;
        .title {
            background: #eee;
        }
    }
    &-bd {
        padding: 10px;
        .info {
            font-size: 14px;
            text-indent: 2em;
        }
    }
    &-ft {
        text-align: center;
        .more {
            color: blue;
        }
    }
}

注释规范

规则声明块内使用双斜杠注释//，避免/* */被postcss识别，影响编译。规则声明块外使用/* */。

/* bad */
.some-content {
    /* height: 2px; */
    height: 1px; /*no*/
}

/* good */
.some-content {
    // height: 2px;
    height: 1px; /*no*/
}

运算规范

运算符之间空出一个空格。注意运算单位，单位同时参与运算，乘除运算时需要特别注意。加减运算时，两个数都带单位；乘除运算时前一个数带单位，后一个数不带。

/* bad */
.some-content {  
  width: 100px - 50;  
  width: 100px + 50;  
  width: 100 * 2px; 
  width: (100px -30)/ 2px;
}

/* good */
.some-content {  
  width: 100px - 50px;  
  width: 100px + 50px;  
  width: 100px * 2; 
  width: (100px - 30px) / 2;
}

LESS 书写规范-前端项目开发