Question

使用LESS，如何在变量末尾用“px”减去值。我有以下变量：

@bpMobile: 600px

我想要做的是减去1px

@media only screen and (max-width: @bpMobile - 1px ) {
}

如何用LESS实现这一目标？

Answer 1

很抱歉这个问题很晚才回答，但是我遇到了这个问题，似乎LESS对间距很挑剔。您的计算周围还需要()。

这不起作用：

@media screen and (max-width: (@widthSmall-2)) { }

然而，这将（注意变量和数字之间的空格）：

@media screen and (max-width: (@widthSmall - 2)) { }

Answer 2

您可以随时使用calc function。

语法： calc(expression)

例如：

abc {
  width:calc(100%-20px)
}

Here是支持此功能的浏览器列表

编辑1：

您可以通过以下两种方式使用它：

少输入：

@bpMobile: 600px;
max-width: calc(~'@{bpMobile} - 1px');

CSS输出：

max-width: calc(600px - 1px);

第二道：减少输入：

@bpMobile: 600px;
max-width: calc(@bpMobile - 1px);

CSS输出：

max-width: calc(599px);

使用第一个选项，可以转义calc参数，以防止在编译时对它们进行评估。在客户端评估之前，这些值将保持完全静态。

使用第二个选项，将在编译时评估calc值。它和

一样

max-width: @bpMobile - 1px;

将导致

max-width: 599px;

Answer 3

问题不在于数学函数，而在于您尝试在媒体查询中使用它。 The docs说您需要将整个查询作为一个变量：

@bpMobile: 600px;
@bpMobile1: @bpMobile - 1px;

@singleQuery: ~"only screen and (max-width: @{bpMobile1})";

@media @singleQuery {
}

Answer 4

来自freejosh的修复程序在lesscss 1.7.0上对我不起作用。

诀窍是简单地在媒体查询中的每个变量或计算周围添加paranthesis：

@media only screen and (max-width: (@bpMobile - 1px) ) { ... }

或

@other: @bpMobile - 1px;
@media only screen and (max-width: (@other) ) { ... }

Answer 5

————————————————————————————————

就我而言。

      .loop(@i) when (@i > 0) {
        @index : @i + 1;

        .abc_@{i}{
          z-index : @index;
        }

        .loop(@i -1);
      }
      .loop(8);

将给出输出：

.abc_8{
  z-index : 8 + 1;
}

————————————————————————————————

另一种情况：

      .loop(@i) when (@i > 0) {
        @index : pow(@i,1) + 1;

        .abc_@{i}{
          z-index : @index;
        }

        .loop(@i -1);
      }
      .loop(8);

将给出输出：

.abc_8{
  z-index : 9;
}

较少：从变量中减去

5 个答案: