Css 减：从变量中减去

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

@bpMobile: 600px

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

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

@media @singleQuery {
}

我要做的是用1px减去这个

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

如何用更少的资源实现这一点？

您可以随时使用

语法：

calc（表达式）

例如：

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

编辑1:

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

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

减少投入：

@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参数将被转义，以防止在编译时对其求值。在客户端对其求值之前，这些值将保持完全静态

使用第二个选项，计算值将在编译时进行计算。这将是一样的

max-width: @bpMobile - 1px; 

这将导致

max-width: 599px;

---

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

@bpMobile: 600px

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

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

@media @singleQuery {
}

---

freejosh的修复程序在LESSCS1.7.0上对我不起作用

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

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

或

---

很抱歉这么晚才回答，但我遇到了这个问题，而且它似乎对间距没有那么挑剔。在计算过程中还需要

（）

这不起作用：

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

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

---

--------------------------------

就我而言

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

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

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

将给出输出：

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

.abc_8{
  z-index : 9;
}

---

--------------------------------

另一种情况：

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

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

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

将给出输出：

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

.abc_8{
  z-index : 9;
}

---

只是尝试了一下，似乎不起作用。但是我可以用这个变量吗？与calc（@bpMobile-1px）一样，calc不支持媒体查询第一种解决方案会很糟糕，即使它确实有效：毕竟，两个值（@bpMobile和1px）都是在较少的编译时间内已知的，所以第二种方法应该是它话虽如此：仍然很好，您指出了不可能实现的场景的“正确转义”，即运行时

calc（）

（=在css中可读）是唯一的选择…我认为URL现在已经变好了，当然更少对空格挑剔了，因为

-

可以是CSS中标识符的一部分。例如，我们不希望

max width

从

max

中减去

width

。至于

@media

查询值的参数-是的，它们是必需的，不管是什么

--严格的数学

选项。最底层的解决方案对我来说很有效。关键是要完全按照所示将所有内容隔开，并在媒体查询中的变量周围添加括号。我使用的是更少的2.3