Can I do the math in string interpolation LESS css?

Question

I have it less and I can't figure out how to do the math inside the string

@bp-tablet-landscape: 1024px; @bp-tablet-portrait : 768px; @tablet-landscape-only: ~"only screen and (min-width:@{bp-tablet-portrait} + 1) and (max-width: @{bp-tablet-landscape})"; 

Using

 div#header { @media @tablet-landscape-only { background: #000; } } 

But it does not compile correctly. It does not add 768px + 1 as I had hoped. Any ideas? I have tried several different tastes, and I cannot nail it. I can obviously define a variable outside the concat line, but I would like to avoid this approach if possible.

winLess online compiler outputs

 @media only screen and (min-width:768px + 1) and (max-width: 1024px) { div#header { background: #000; } } 

I want to get 769px instead of 768px + 1

Answer 1

Not inside the line itself, but ...

If you separate it from the line, do the following interpolation (note the second ~ ), this works:

 @tablet-landscape-only: ~"only screen and (min-width: "(@bp-tablet-portrait + 1) ~") and (max-width: @{bp-tablet-landscape})"; 

To do this:

 @media only screen and (min-width: 769px ) and (max-width: 1024px) { div#header { background: #000; } }