Why is there strange css generation for media query?

Question

Less

Greetings.
Weird output occurs when generating less -> css:

@sizeMobile: 600px;
@sizeMobileMinWidth: @sizeMobile + 1px;
@media screen and (min-width: @sizeMobileMinWidth) and (max-width: 1024px){
  .here{
    sizeMobile: @sizeMobile;
    sizeMobileMinWidth: @sizeMobileMinWidth;
  }
}

Outputs:

@media screen and (min-width: 600px + 1px) and (max-width: 1024px){
  .here{
    sizeMobile: 600px;
    sizeMobileMinWidth: 601px;
  }
}

You can test it here: jsfiddle.net/eq6dn5fa
How to get substitution of the result of the expression, and not the expression itself in the media query?

Answer 1

@sizeMobile: 600px;
@sizeMobileMinWidth: @sizeMobile + 1px;
  .media (@min){
    @media (min-width: @min) and (max-width: 1024px){
      sizeMobile: @sizeMobile;
      sizeMobileMinWidth: @sizeMobileMinWidth;
    }
  }
.here {
  .media(@sizeMobileMinWidth)
}