12

目前，我使用 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在每个媒体查询中覆盖？在这个最简单的例子中不是问题，但在实际项目中，这可以节省大量时间和复制/粘贴。

编辑： 不是解决方案，而是我的特定项目的解决方法：

  1. 将字体大小设置<html>为基本字体大小
  2. myVarLESS 变量被定义为rem而不是px作为基本字体大小的衍生物
  3. 使用@media查询来调整不同媒体的基本字体大小。
  4. 可选对尚不支持的浏览器使用REM 单元 polyfillrem ( http://caniuse.com/#search=rem )。这在 IE 8 及更低版本中不起作用，但不是因为缺乏对rem-它不支持媒体查询的支持。因此，无论如何，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，它将不同字体大小的元素与不同测量的块混合在一起。

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

4

3 回答 3

10

让我更直接地回答这个问题：

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

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

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

有关使用 LESS 构建媒体查询的进一步讨论，以使它们都在一起而不是分散在整个代码中，请参阅此问题。

于 2013-01-03T16:13:35.037 回答
6

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

例子：

@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包含在一个定义中，并且没有在其他地方更改（可能是完全不同的文件），这使得“调试”变得困难。

于 2013-01-03T13:01:29.240 回答
5

关于什么：

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

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


.myElement(@myVar) {
    .myElement {
        padding: @myVar;
    }
}
于 2013-01-03T13:07:55.133 回答