Question

目前，我使用LESS作为我的主要CSS预处理器。我（并且我确信很多人都有此需求）在@media查询中定义变量，如：

@media screen and (max-width: 479px) {
    myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    myVar: 20px;
}
@media screen and (min-width: 768px) {
    myVar: 30px;
}

.myElement {
    padding: @myVar;
}

这在LESS中不起作用，因为编译性质（@myVar仅在每个特定@media的范围内定义，但不是全局定义。即使我在媒体查询之前全局定义@myVar，也不会根据媒体查询进行更新，.myElement无论如何都会获得该初始值。

所以，问题是，是否有可能在任何其他CSS预处理器中实现这一点，或者我们注定要覆盖每个媒体查询中的.myElement？在这个最简单的例子中不是问题，但在实际项目中，这可以节省大量时间并复制/粘贴。

修改不是解决方案，而是针对我的特定项目的解决方法：

将<html>上的字体大小设置为基本字体大小
myVar LESS变量在rem而非px中定义，作为基本字体大小的衍生物
使用@media查询调整不同媒体的基本字体大小。
可选对于尚不支持rem（REM unit polyfill）的浏览器，请使用http://caniuse.com/#search=rem。这在IE 8及更低版本中不起作用，但不是因为缺乏对rem - it doesn't support media queries的支持。因此，无论如何，IE8及以下版本都可以获得完整尺寸的无媒体查询样式表。

代码段：

@myVar: .77rem; // roughly 10px, 20px and 30px respectively

html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
    html { font-size: 26px }
}
@media screen and (min-width: 768px) {
    html { font-size: 39px }
}

.myElement {
    padding: @myVar;
}

这是一个JSBin，其中包含更广泛的示例，它将不同的字体大小元素与不同的测量块混合在一起。

轻松灵活地满足我的需求。希望对其他人有所帮助。

Answer 1

让我直接回答这个问题：

“是否有可能在任何其他CSS预处理器中实现这一点，或者我们注定要覆盖每个媒体查询中的.myElement吗？“

答案实际上存在于这个问题中。由于LESS（和其他类似工具）是一个“预处理器”，@media在编译时没有任何意义，因为它没有查看浏览器的媒体状态进行预处理。 {/ 1}}状态仅在预处理后与相关，此时已经计算了任何@media。这就是为什么你要做的事情无法奏效的原因。您的@someVariable只能在CSS样式表中作为单个值输出，并且该输出在@myVar评估浏览器状态之前发生。

所以它与媒体查询的“全局”或“本地”范围无关，而是LESS利用变量将代码编译成CSS的事实，而且是支付的CSS（不是LESS）注意@media查询信息。

有关使用LESS构建媒体查询的一些进一步讨论，它们全部在一起而不是分散在整个代码中，请参阅this question。

Answer 2

您可以将媒体查询重构为变量，然后在元素中使用它们。

示例：

@phone: ~"screen and (max-width: 479px)";
@tablet: ~"screen and (min-width: 480px) and (max-width: 767px)";
@desktop: ~"screen and (min-width: 768px)";

.myElement {
  @media @phone { padding: 10px; }
  @media @tablet { padding: 20px; }
  @media @desktop { padding: 30px; }
}

产生：

@media screen and (max-width: 479px) {
  .myElement {
    padding: 10px;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .myElement {
    padding: 20px;
  }
}
@media screen and (min-width: 768px) {
  .myElement {
    padding: 30px;
  }
}

整个使媒体查询嵌入到变量中的未解析的文字并不完美，但也有助于标准化媒体查询。

它有助于提高可读性，因为.myElement的所有三个行为都包含在一个定义中，而不会在其他地方更改（可能是完全不同的文件），使“调试”变得困难

Answer 3

怎么样：

@media screen and (max-width: 479px) {
    .myElement(10px);
}

@media screen and (min-width: 768px) {
    .myElement(30px);
}


.myElement(@myVar) {
    .myElement {
        padding: @myVar;
    }
}

CSS预处理器，可以在@media查询中定义变量

3 个答案: