css - 使用 LESS 递归函数和媒体查询生成样式

Question

我正在尝试生成一些相对于屏幕高度的东西，并决定尝试使用 LESS 来生成类似的东西，即使只是作为测试有点重:

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

所以样式设置正确但媒体条件丢失:(有人知道为什么吗？:)

谢谢!!

更新修复了向媒体条件添加括号的问题(请参阅下面的评论)。

Answer 1

无论--strict-math如何，@media 查询中的算术运算都应始终在括号中选项。 IE。应该是 @media (min-height: (@baseHeight * @screenHeight))。