媒体查询语句中的计算

Question

很少，我有

@logo-width: @logo-height * @aspect-logo;

当用作变量时，通常会产生合理的数字

width: @logo-width;
>> width: 299px;

但是，当我在媒体查询中使用该变量时，它被解释为字符串：

@media only screen and (min-width: @logo-width) {
>> @media only screen and (min-width: 80px * 560/150) {

如何防止这种行为？

Answer 1

@media查询语句中的算术表达式需要parens而不管--strict-math option。即对于你的代码片段，它应该是：

@logo-width: @logo-height * @aspect-logo;

@media only screen and (min-width: (@logo-width)) {
    // ...
} 

或：

@logo-width: (@logo-height * @aspect-logo);

@media only screen and (min-width: @logo-width) {
    // ...
}