我可以在一个LESS css字符串插值中做数学吗？ [英] 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})";

使用

div#header {

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

但它不能很好地编译。它不添加768px + 1，如我所希望的。有任何想法吗？我试过几种不同的口味，我不能钉。我可以在字符串concat之外显式定义一个变量，但是如果可能，我想避免这种方法。

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在线编译器输出

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

我想获得 769px c>


I want to get 769px in there instead of 768px + 1

推荐答案

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

如果将它从字符串中分离出来，则执行第二个插值操作（注意第二个〜），这项工作原理：

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

要产生：

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

这篇关于我可以在一个LESS css字符串插值中做数学吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！