Skip to main content

LESS 使用技巧

变量命名加前缀，利于阅读​

例如，我们可以统一将 c 或 color 作为颜色变量的前缀：

@c-header-bg: #fff; // 好
@color-header-bg: #fff; // 更好

多级继承​

extend 继承要加 all 才能多级继承，否则只会继承第一级的样式。例如：

  • .samsung-galaxy:extend(.phone all) {} 可以继承 .phone { .phone_screen {} } 以内所有样式代码，包括 .phone_screen。
  • 而若缺少 all 则不会继承 .phone_screen。

继承机制下的样式合并​

预处理器很智能，通过 extend 继承的样式代码只有一份，不会有冗余。例如：

  • .samsung-galaxy:extend(.phone all) {} 最终生成的是 .phone, .samsung-galaxy { /* .phone 的样式代码 */ }。
  • 并不会愚笨地生成两份一模一样的样式代码：.phone { /* .phone 的样式代码 */ } .samsung-galaxy { /* .phone 的样式代码 */ }。

不同单位间的运算​

计算的结果以最左侧操作数的单位类型为准。要特别注意。 乘除法不会帮我们换算单位，将直接采用左侧操作数的单位。

mixin 必须加括号​

沿用多年的 .b { .a; } 这样的写法未来不会支持了，养成加括号的习惯 .b { .a(); }。随着括号的加入，mixin 有了更多玩法，具体看文档。

Historically, the parentheses in a mixin call are optional, but optional parentheses are deprecated and will be required in a future release.

.a(); 
.a;    // currently works, but deprecated; don't use
.a (); // white-space before parentheses is also deprecated

在样式代码中快捷地用除法​

若直接用除号是没有效果的，会当做字符串直接输出：

// 源码
@size: 10px;
height: @size / 2;
// 输出字符串 "height: 10px / 2;" 导致高度无效

一般情况下，想有效必须用 calc() 把除法运算括起来：

// 源码
@size: 10px;
height: calc(@size / 2);
// 正确输出 "height: calc(10px / 2);"

思考：

  • 是否有更简便的写法？
  • 能否提前运算好，不使用运行时的 calc() 减少客户端的执行效率？

实现要点：

  • 首先数学中除2 和 乘0.5 是一致的。
  • 刚好 less 中 乘法是可以不用 calc() 括起来的。

优化后：

@size: 10px;
height: @size / 2;
// 输出 "height: 5px;"