Почему происходит странная генерация css для media query?

Question

[MrSunny]

Приветствую.

Странный вывод происходит при генерации less -> css:

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

Выводит:

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

Протестировать можно тут: jsfiddle.net/eq6dn5fa

Как добиться подстановки результата выражения, а не самого выражения в media query?

Answer 1

[asdz]

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

Comments

[MrSunny]

Без миксина не вариант?

[asdz]

MrSunny: @sizeMobileMinWidth: (@sizeMobile + 1px);

[MrSunny]

asdz: Благодарю, это то что было нужно.

[Котик Антон]

asdz: а в чем причина такого "странного" поведения, знаете? Что мешает less ввчислить результат без скобок?