LESS CSS设置变量在媒体查询？

我在一个iPad专用网站上工作。为了使我的网站工作在视网膜显示iPad和旧版本的iPad，我想在LESS CSS中设置一个变量在媒体查询如：

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

所以，当你设置任何像素，你可以做

width: 100px * @ratio;

但我有一个编译错误，@ratio没有定义。有可能有一个解决方法，使其工作？谢谢。

解决方法

这将是很好，但这是不可能这样做。

LESS将您的媒体查询编译为实际的媒体查询，因此在编译时没有指示哪个媒体查询将与浏览器相关。

编译后的时间你只是CSS不少，所以你不能再有变量了。

你可以做到这一点，但它不那么优雅：

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}