我可以在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

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

如果你将它从字符串中分离出来,那么在下面进行第二次插值(注意第二个~),这有效:

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