使用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屋!