LESS CSS 在媒体查询中设置变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10906114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESS CSS set variables in media query?
提问by Sean
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:
我正在处理一个 iPad 特定的网站。为了让我的网站在 Retina 显示屏 iPad 和旧版 iPad 上都能运行，我想在媒体查询中的 LESS CSS 中设置一个变量，例如：
@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;
But I got a compile error saying @ratio is not defined. Is it possible to have a workaround to make it work? Thanks.
但是我收到一个编译错误，说 @ratio 没有定义。是否有可能有解决方法使其工作？谢谢。
回答by Paul
It would be nice, but this is impossible to do like this.
这会很好，但这样做是不可能的。
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.
LESS 将您的媒体查询编译为实际的媒体查询，因此在编译时没有指示哪个媒体查询与浏览器相关。
After compile time you just have CSS not less so you can't have variables anymore.
编译后，你的 CSS 不会少，所以你不能再有变量了。
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;
}
}
回答by Peter Dvukhrechensky
I know I'm late with my answer but someone may find this useful.
我知道我的回答迟到了，但有人可能会觉得这很有用。
You can move your styles to a separate file
您可以将样式移动到单独的文件
// styles.less
.foo {
width: 100px * @ratio;
}
And then import the file multiple times after changing variables' values
然后在更改变量的值后多次导入文件
// 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";
}
Note that (multiple) is important here
请注意，（多个）在这里很重要
Compiled code will look like this
编译后的代码看起来像这样
// main.css
@media all and (max-width: 768px) {
.foo {
width: 100px;
}
}
@media all and (min-width: 769px) {
.foo {
width: 200px;
}
}
回答by Artyom Pranovich
For those who might allow supporting relatively modern browsers only (Chrome 49+, FF 31+, no IE), you can use css variablesinstead.
对于那些可能只允许支持相对现代的浏览器（Chrome 49+、FF 31+、无 IE）的人，您可以使用css 变量代替。
Here isbrowser support table from "Can I Use".
这是“我可以使用”中的浏览器支持表。
html {
--width-var: 300px;
@media only screen and (max-width: 750px) {
--width-var: 200px;
}
}
.your-class {
max-width: calc( var(--width-var) * 2 );
.... // tons of other props
}
With the code above, whenever screen is getting smaller than 750px, max-widthproperty from .your-classis recalculated (since --width-varis changed), and of course when screen is resized to be bigger - css variable gets back to its original value.
使用上面的代码，每当屏幕变得小于 750px 时，就会重新计算max-width属性 from .your-class（因为--width-var已更改），当然，当屏幕被调整为更大时 - css 变量会恢复到其原始值。
回答by Manuel Ebert
That's a little hackish, but a possible solution is to set the font-size for a wrapper element and set all units to em:
这有点hackish，但可能的解决方案是设置包装元素的字体大小并将所有单位设置为em：
HTML:
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
}
}
That of course does not work if you have elements that contain text AND children.
如果您的元素包含文本和子元素，那当然不起作用。
回答by Flimm
LESS currently cannot do this, although it would be technically possible for it to do it. This feature has been requested in the GitHub issue entitled Less variables in media queries.
LESS 目前无法做到这一点，尽管它在技术上是可以做到的。此功能已在题为媒体查询中的 Less variables的 GitHub 问题中请求。
See also this question: CSS pre-processor with a possibility to define variables in a @media query
另见这个问题：CSS pre-processor with a possible to define variables in a @media query
回答by Rijk
I found the accepted solution not to work, as the compiler would complain the mixin was not defined. An alternative solution:
我发现接受的解决方案不起作用，因为编译器会抱怨未定义 mixin。另一种解决方案：
@base_width: 100px;
.mixin {
width: @base_width;
@media all and (min-width: 769px) {
width: @base_width * 2;
}
}
回答by Deborah
I had a LESS variable that I was using everywhere, including in calculations. For me, the variable had to be flexible and change for screen width, or all the calculations would have to be duplicated and either use a different variable or do a different calculation.
我有一个 LESS 变量，我到处都在使用，包括在计算中。对我来说，变量必须灵活并根据屏幕宽度进行更改，否则所有计算都必须重复并使用不同的变量或进行不同的计算。
This is what I did, and now the same variable works properly wherever it is used.
这就是我所做的，现在无论在哪里使用相同的变量都可以正常工作。
It sets the variable in CSS, and changes it when javascript adds a conditional class. The LESS variable invokes the CSS variable.
它在 CSS 中设置变量，并在 javascript 添加条件类时更改它。LESS 变量调用 CSS 变量。
IE 11 does not support, so be careful.
IE 11 不支持，所以要小心。
/* CSS var sets the width for normal screen size */
:root {
--side-nav-width: 252px;
}
/* change the CSS var under conditions
I think it would work in a media query but didn't test */
.side-nav-closed {
--side-nav-width: 72px;
}
/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);
回答by Marco Allori
With less we can define variables for media query.
first of all detect iPad resolution:
使用 less 我们可以为媒体查询定义变量。
首先检测 iPad 分辨率：
@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);
These are em equivalent of 641px and 1024px.
Now detect high resolution:
它们相当于 641px 和 1024px。
现在检测高分辨率：
@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)";
Now we can combine these 2 variables in a media query like this:
现在我们可以在媒体查询中组合这两个变量，如下所示：
@media @iPad, @highResolution{ .yourCssClass{} }
this will be valid just on iPad (or similar resolutions) with retina display (or similar pixel density).
这仅在具有视网膜显示（或类似像素密度）的 iPad（或类似分辨率）上有效。
