css - 更少的混合建议

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);
}

Answer 1

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

.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;
}