CSS预处理器的可能性，以在@media查询定义变量(CSS pre-processor with

目前，我使用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;
}

这不会减少工作的，因为编译性质（ @myVar是每一个特定的范围内定义的@media而已，但不是全球）。即使我定义@myVar媒体查询之前在全球，它不更新，根据媒体查询和.myElement获取初始值，不管是什么。

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

编辑：不是一个解决办法，但我的特别项目的解决方法 ：

上设置的字体大小<html>到基字体大小
myVar LESS变量定义在rem代替px作为碱字体大小的衍生物
使用@media查询调整基本字体，大小不同的媒体。
可选择使用REM单元填充工具的浏览器，那还不支持rem （ 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与混合不同的字体大小的元素具有不同测量块更广泛的例子。

方便灵活的满足我的需要。希望能对别人有帮助的。

Answer 1:

我来回答更直接的问题是：

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

其实答案存在于这个问题。因为较少（和其他类似的工具）是一种“预处理器”的@media意味着在编译的时候没有什么不可以的，因为它不看浏览器的预处理的媒体状态。该@media状态是预处理，在这一点任何后才相关@someVariable已经计算出来了。这就是为什么你正在尝试做的不能工作。您@myVar只能是在CSS样式表单值输出，并且之前浏览器状态有史以来评估发生时输出@media 。

因此，它没有与媒体查询的“全局”或“本地”范围内的事，但LESS编译代码到利用变量CSS的事实，那就是注重的CSS（不低于） @media查询信息。

有关在这样一种方式，他们都是一起的，而不是散落在代码构建媒体查询用更少的进一步讨论，请参阅这个问题。

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 pre-processor with a possibility to define variables in a @media query