LESS mixin advice

3
votes

Im trying to create a LESS mixin for my font size and line-height but at the moment get an error when I try to run it. Can anyone advise where I might be going wrong with this:

.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);
}
1
cssless

1 Answers

4
votes

LESS does not support parameters which depend on other parameters. To implement an optional second argument, you can add another mixin:

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

compiles to:

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