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