Can I do math within a LESS css string interpolation?

问题

I have this 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})";

Usage

div#header {

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

But it doesn't quite compile correctly. It doesn't add 768px + 1 as I had hoped. Any ideas? I've tried several different flavors and I can't nail it. I can obviously define a variable outside the string concat, but I'd like to avoid that 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 in there instead of 768px + 1

回答1:

Not Within the String Itself, but...

If you separate it out of the string, then do a second interpolation following (note the 2nd ~), this works:

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

To produce this:

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

来源：https://stackoverflow.com/questions/19819699/can-i-do-math-within-a-less-css-string-interpolation