css - LESS：从变量中减去

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

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

编辑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

freejosh 的修复在 lesscss 1.7.0 上对我不起作用。

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

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

或者

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

Answer 4

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

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

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

@media @singleQuery {
}

Answer 5

————————————————————————————————————</p>

就我而言。

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

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

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

将给出输出：

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

————————————————————————————————————</p>

另一个案例：

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