前端页面开发less规范写法
代码组织
代码按一下顺序组织：
- @import
- 变量声明
- 样式声明
1 @import "mixins/size.less"; 2 @default-text-color: #333; 3 .page { 4 width: 960px; 5 margin: 0 auto; 6 }
@import 语句
@import 语句引用的文需要写在一对引号内，.less 后缀不得省略。引号使用 ' 和 " 均可，但在同一项目内需统一。
/* Not recommended */ @import "mixins/size"; @import 'mixins/grid.less'; /* Recommended */ @import "mixins/size.less"; @import "mixins/grid.less";
混入（Mixin）
-
在定义
mixin时，如果mixin名称不是一个需要使用的 className，必须加上括号，否则即使不被调用也会输出到 CSS 中。 - 如果混入的是本身不输出内容的 mixin，需要在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className。
1 /* Not recommended */ 2 .big-text { 3 font-size: 2em; 4 } 5 h3 { 6 .big-text; 7 .clearfix; 8 } 9 /* Recommended */ 10 .big-text() { 11 font-size: 2em; 12 } 13 h3 { 14 .big-text(); /* 1 */ 15 .clearfix(); /* 2 */ 16 }
避免嵌套层级过多
- 将嵌套深度限制在2级。对于超过3级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
- 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:
1 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
路是自己走出来的，而不是选出来的。