Less/Meteor 将媒体查询视为变量？答案

【问题标题】：Less/Meteor treating media queries as variables?Less/Meteor 将媒体查询视为变量？
【发布时间】：2014-05-19 03:06:43
【问题描述】：

我是第一次使用 Less 和 Meteor。一切都非常酷，除了我在试图让媒体查询工作时受到阻碍。

我有一系列类似这样的媒体查询：

/* Desktops and laptops ----------- */ 
@media only screen  and (min-width : 1224px) {   
@columns: 12;
  .full() {
    width: 100%;
  }
  .container(){
    .center(12);
  }
  .main-col() {
    .column(9);
    .push(0);
  }
  .side-col(){
    .column(3);
    float:right;
  }
  .nested-left-col(){
     .nested-left(6) 
   }
  .nested-right-col(){
     .nested-right(3);
  }
}

但是当 css 被编译时，我得到的只是这个：

/* Desktops and laptops ----------- */

奇怪的是，只包含 cmets 的媒体查询按预期编译：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

我很确定这些媒体查询被视为永远不会被调用的变量。

我只是做错了吗？有什么我想念的非常明显的东西吗？我一直在寻找一个半小时的答案，但找不到任何有同样问题的人。这表明我错过了显而易见的事情，但也许我遇到了一些不寻常的事情。

【问题讨论】：

您的代码只包含parametric mixins，除非被调用，否则它什么都不做。因此空输出是预期的。
当我在查询之外有该代码时，它们会被调用，但是当我将它们放入时它们不是？
见Scope。每个@media 块都有自己的范围，因此在@media 块内定义的mixin 仅在该块中可见。（即，@media 块之外的 mixin 调用不会调用其中定义的 mixin）。可能对您正在尝试做的事情进行稍微扩展的示例会有所帮助。

标签： meteor less media-queries

【解决方案1】：

知道了。

我最初以不同的方式处理这些 mixin，并打算将它们设为参数，所以他们有 ()。在我改变了我的方法之后，我没有费心去删除 ()s，因为只要我只是在 CSS 中直接调用它们进行布局测试，它就可以很好地不向它们传递任何值。但是当我将它们移到媒体查询中时，它们不再被调用，我得到了空白输出。

删除 () 使其不再被评估为参数修复它。

我仍然没有从 @columns 变量中得到任何输出，但我正在尝试做的是重新声明一个全局值。我有点预计这无论如何都行不通，所以我会找到一种不同的方法。

谢谢。非常感谢。

【讨论】：