LESS CSS设置媒体查询中的变量？

Question

我正在研究iPad特定的网站。为了使双方的Retina显示屏的iPad和旧版本的iPad的在我的网站的工作，我想在像媒体查询设置变量LESS CSS：

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

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

所以，当你设置在像素东西，你可以做

width: 100px * @ratio; 

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

Answer 1

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

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

Answer 2

这是一个小的hackish，但一个可能的解决方案是将所有单位设置字体大小的包装元素，并设置为em ：

HTML：

<div id="wrap"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div> 

LESS：

#wrap 
    { 
    font-size: 100px; 
    width: 10em; // = 1000px; 
    @media all and (max-width: 768px) 
     { 
     font-size: 60px; 
     } 
    .child1 
     { 
     width: 5em; // 500px normally, 300px on small screens 
     } 
    .child1 
     { 
     width: 2.5em; // 250px normally, 150px on small screens 
     } 
    } 

这当然不起作用，如果你有元素包含文本和孩子。

Answer 3

用较少的我们可以为媒体查询定义变量。
首先是检测的iPad分辨率：

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em); 

这些EM相当于641px和1,024像素。


现在检测分辨率高：

@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
      ~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
      ~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
      ~"only screen and (min-device-pixel-ratio: 1.5)"; 

现在我们可以在媒体查询结合这2个变量是这样的：

@media @iPad, @highResolution{ .yourCssClass{} } 

这将是有效的只是在iPad上（或类似分辨率）与视网膜显示（或类似的像素密度）。

Answer 4

LESS目前无法做到这一点，尽管它在技术上可行。此功能已在GitHub issue Less variables in media queries中提出。

也是这个问题，请参见：CSS pre-processor with a possibility to define variables in a @media query

Answer 5

我发现接受的解决方案无法工作，因为没有定义，编译器会抱怨的混入。一种替代解决方案：

@base_width: 100px; 

.mixin { 
    width: @base_width; 

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

Answer 6

我知道我迟到了，但我的答案有人会觉得这很有用。

您可以将您的样式到一个单独的文件

// styles.less 
.foo { 
    width: 100px * @ratio; 
} 

然后多次导入的文件改变变量值

// main.less 
@ratio: 1; // initial value 

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

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

需要注意的是（多）在这里很重要

后

编译代码将如下所示

// main.css 
@media all and (max-width: 768px) { 
    .foo { 
    width: 100px; 
    } 
} 
@media all and (min-width: 769px) { 
    .foo { 
    width: 200px; 
    } 
}