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

Question

我正在开发一个特定于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.有可能有一个解决方法使其工作？谢谢.

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

我知道我的回答迟到了,但有人可能觉得这很有用.

您可以将样式移动到单独的文件中

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

Answer 3

对于那些可能只允许支持相对现代的浏览器（Chrome 49+、FF 31+、无 IE）的人，您可以改用css 变量。

这是“我可以使用”中的浏览器支持表。

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
}

使用上面的代码，每当屏幕变得小于 750px 时，都会重新计算max-width属性（因为已更改），当然，当屏幕大小调整为更大时 - css 变量会恢复到其原始值。.your-class--width-var