使用LESS递归函数和媒体查询生成样式 [英] Generate styles using LESS recursive function and media queries

问题描述

我试图生成一些相对于屏幕高度，并决定尝试使用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不是全部{
 #ConversationMessages .messages {
 max-height ：2100px; 
 min-height：2000px; 
} 
} 
 @media不是全部{
 #ConversationMessages .messages {
 max-height：2120px; 
 min-height：2020px; 
} 
} 
 @media不是全部{
 #ConversationMessages .messages {
 max-height：2140px; 
 min-height：2040px; 
} 
} 
 @media不是全部{
 #ConversationMessages .messages {
 max-height：2160px; 
 min-height：2060px; 
} 
} 
  

所以样式设置正确，但媒体条件

更新

strong>
修正向媒体条件添加括号（见下面的注释）。

解决方案

$ c> @media 查询应始终在括号中，而不管 - strict-math 选项。也就是说应该 @media（min-height：（@baseHeight * @screenHeight））。

I am trying to generate some relative to screen height and decided to try to use LESS to generate something like that, even if a bit heavy just as a test:

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

That seems to work, most of it, but this is part of what it generates when calling it:

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

So the styles are being set properly but the media condition is lost :( Does anyone know why? :)

Thanks!!

Update Fixed adding parenthesis to the media condition (see comment below).

解决方案

Arithmetic operations inside @media queries should always be in parens regardless of --strict-math option. I.e. should be @media (min-height: (@baseHeight * @screenHeight)).

这篇关于使用LESS递归函数和媒体查询生成样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！