LESS CSS设置变量在媒体查询？ [英] LESS CSS set variables in media query?

问题描述

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

I'm working on a iPad-specific website. To make my website work on both the retina display iPad and older versions of iPads, I want to set a variable in LESS CSS in media query like:

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

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

因此，当您以像素为单位设置任何内容时，您可以

So when you are setting anything in pixels, you can do

width: 100px * @ratio;

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

But I got a compile error saying @ratio is not defined. Is it possible to have a workaround to make it work? Thanks.

推荐答案

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

It would be nice, but this is impossible to do like this.

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

LESS compiles your media queries to actual media queries, so at compile time there is no indication of which media query will be relevant to the browser.

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

After compile time you just have CSS not less so you can't have variables anymore.

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

You can do this instead but it isn't as elegant:

@base_width: 100px;

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

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

这篇关于LESS CSS设置变量在媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！