LESS混合指南建议

Question

我试图创建一个用于字体大小和行高的LESS mixin，但是目前在运行时出现错误。请问有人能指导我可能哪里出错了：

.font( @size: 1.6, @line: @size * 1.5 ){
  @fontSizeRem: @size;
  @fontSizePx: ( @size * 10 );
  @lineHeightRem: @line;
  @lineHeightPx: ( @line * 10 );
  font-size: ~"@{fontSizePx}px";
  font-size: ~"@{fontSizeRem}rem";
  line-height: ~"@{lineHeightPx}px";
  line-height: ~"@{lineHeightRem}rem";
}

h1{
 .font(1.6);
}

- styler

Answer 1

LESS不支持依赖于其他参数的参数。要实现可选的第二个参数，可以添加另一个mixin：

.font( @size:1.6 ) {
  .font(@size, @size * 1.5)
}
.font( @size, @line ) {
    /* ... See question for the remainder ... */

编译为：

h1 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24.000000000000004px;
  line-height: 2.4000000000000004rem;
}

- Rob W