css - 我可以在 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 在线编译器输出

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

我想进去769px而不是768px + 1

Answer 1

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

如果将它从字符串中分离出来，然后在之后进行第二次插值（注意 2nd ~），这可行：

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