• LESS
    • 代码组织
    • @import 语句
    • 混入（Mixin）
    • 避免嵌套层级过多
    • 字符串插值

    LESS

    代码组织

    代码按一下顺序组织：

    1. @import
    2. 变量声明
    3. 样式声明
    1. @import "mixins/size.less";
    3. @default-text-color: #333;
    5. .page {
    6.   width: 960px;
    7.   margin: 0 auto;
    8. }

    @import 语句

    @import 语句引用的文需要写在一对引号内，.less 后缀不得省略。引号使用 ' 和 " 均可，但在同一项目内需统一。

    1. /* Not recommended */
    2. @import "mixins/size";
    3. @import 'mixins/grid.less';
    5. /* Recommended */
    6. @import "mixins/size.less";
    7. @import "mixins/grid.less";

    混入（Mixin）

    1. 在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，必须加上括号，否则即使不被调用也会输出到 CSS 中。

    2. 如果混入的是本身不输出内容的 mixin，需要在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className。

    1. /* Not recommended */
    2. .big-text {
    3.   font-size: 2em;
    4. }
    6. h3 {
    7.   .big-text;
    8.   .clearfix;
    9. }
    11. /* Recommended */
    12. .big-text() {
    13.   font-size: 2em;
    14. }
    16. h3 {
    17.   .big-text(); /* 1 */
    18.   .clearfix(); /* 2 */
    19. }

    避免嵌套层级过多

    • 将嵌套深度限制在2级。对于超过3级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
    • 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。

    字符串插值

    变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:
    @base-url: "http://assets.fnord.com";
    background-image: url("@{base-url}/images/bg.png");