/* Recommended */
@import "mixins/size.less";
@import "mixins/grid.less";
混入（Mixin）
在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，必须加上括号，否则即使不被调用也会输出到 CSS 中。
如果混入的是本身不输出内容的 mixin，需要在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className。
CSS Code复制内容到剪贴板
/* Not recommended */
.big-text {
font-size: 2em;
}
h3 {
.big-text;
.clearfix;
}
/* Recommended */
.big-text() {
font-size: 2em;
}
h3 {
.big-text(); /* 1 */
.clearfix(); /* 2 */
}
避免嵌套层级过多
将嵌套深度限制在 2 级。对于超过 3 级的嵌套，给予重新评估。这可以避免出现过于详实的 CSS 选择器。
避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于 20 行的嵌套规则出现。
字符串插值
变量可以用类似 ruby 和 php 的方式嵌入到字符串中，像 @{name} 这样的结构:@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
性能优化
慎重选择高消耗的样式
高消耗属性在绘制前需要浏览器进行大量计算：
box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）
避免过分重排
当发生重排的时候，浏览器需要重新计算布局位置与大小，更多详情。
常见的重排元素:
width
height
padding
margin
display
border-width
position
top
left
right
bottom
font-size
float
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertical-align
clear
white-space
min-height
正确使用 Display 的属性
Display 属性会影响页面的渲染，请合理使用。
display: inline 后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float；
不滥用 Float
Float 在渲染时计算量比较大，尽量减少使用。
动画性能优化
