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。有任何想法吗？我尝试了几种不同的口味，但我无法做到。我显然可以在字符串连接之外定义一个变量，但我想尽可能避免这种方法。

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