Css 使用较少的递归函数和媒体查询生成样式

我正在尝试生成一些与屏幕高度相关的内容，并决定尝试使用较少的内容来生成类似的内容，即使只是作为测试有点重：

@baseHeight: 1px;
.setRelativeHeight(@screenHeight, @minHeightDiff, @maxHeightDiff) when(@screenHeight < 2400) {

    @media (min-height: @baseHeight * @screenHeight) {
        min-height: @baseHeight * (@screenHeight - @minHeightDiff);
        max-height: @baseHeight * (@screenHeight - @maxHeightDiff);
    }
    .setRelativeHeight(@screenHeight + 20, @minHeightDiff, @maxHeightDiff);
}

因此，样式设置正确，但媒体条件丢失：（有人知道原因吗？：）

谢谢

更新

---

修复了在媒体条件中添加括号的问题（请参见下面的注释）。

在

@media

查询中的算术运算应始终位于括号中，无论选项如何。也就是说，应该是

@media（最小高度：（@baseHeight*@screenHeight））

在

@media

中的算术运算应该始终在paren中，无论选项如何。也就是说，应该是

@媒体（最小高度：（@baseHeight*@screenHeight））…

。虽然说到您的初始结果，您使用的编译器少了多少？在这种情况下，似乎不会产生这样的结果。谢谢！它起作用了！我在使用Visual Studio 2013时使用了一个带有引导和较少已安装的模板，检查NuGet软件包，我认为它是“BundleTransformer.LESS”。我知道，很可能是

dotless

，因此，以防万一，要小心，

dotless

是非常过时的无点实现，而且不是所有你能找到的无点实现的例子。（很高兴知道这种媒体查询方式也同样适用。）@Ruben.Canton请添加您自己的答案（并接受），而不是编辑您的问题。

@media not all {
#ConversationMessages .messages {
    max-height: 2100px;
    min-height: 2000px;
}
}
@media not all {
#ConversationMessages .messages {
    max-height: 2120px;
    min-height: 2020px;
}
}
@media not all {
#ConversationMessages .messages {
    max-height: 2140px;
    min-height: 2040px;
}
}
@media not all {
#ConversationMessages .messages {
    max-height: 2160px;
    min-height: 2060px;
}
}