我可以在LESS css字符串插值中进行数学运算吗？

Question

我减少了这一点，我无法弄清楚如何在字符串

中进行数学运算

@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})";

用法

div#header {

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

但它没有完全正确编译。它没有像我希望的那样增加768px + 1。有任何想法吗？我尝试了几种不同的口味，我无法指出它。我显然可以在字符串concat之外定义一个变量，但是如果可能的话我想避免这种方法。

winLess online compiler输出

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

我希望769px代替768px + 1

Answer 1

不在字符串本身，但......

如果你将它从字符串中分离出来，那么在下面进行第二次插值（注意第二个~），这是有效的：

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

产生这个：

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