使用 LESS 的媒体查询中嵌套 Mixins 中可能存在的错误答案

【问题标题】：Possible Bug in Nested Mixins in Media Queries using LESS使用 LESS 的媒体查询中嵌套 Mixins 中可能存在的错误
【发布时间】：2013-12-09 08:46:09
【问题描述】：

编辑：已解决

我正在研究一种轻松编写 LESS 代码的方法，该代码采用参数但仍适用于媒体查询。事实证明这是相当复杂的，但我已经让它工作了——除了一个之外的所有尺寸。中号和大号都可以，但是小号由于某种原因不打印参数，给我留下了像font-size: ;这样的css。

我在这里定义我的媒体尺寸：

@m-small = ~"screen and (max-width: 799px)";
@m-medium = ~"screen and (min-width: 800px) and (max-width: 1299px)";
@m-large = ~"screen and (min-width: 1300px)";

然后，我调用的主函数，其中@attr 是CSS 属性（例如font-size），@parameter 是变量（例如fs-medium）。要使用它，我可以写.media('font-size', 'fs-medium')，这比定义每个媒体查询要简洁得多。

编辑：这里有一个错误，因此出现了问题；我已经修好了。

.media(@attr, @parameter) {
  @media @m-small {
    .small(@attr, @parameter); 
  }

  @media @m-medium {
    .medium(@attr, @parameter);
  }

  @media @m-large {
    .large(@attr, @parameter);
  }
}

这些函数存储不同大小的参数的默认值，允许我在定义变量的位置合并，按媒体查询分组：

.small(@attr, @parameter) {
  @fs-small   : 1.4rem;
  @fs-medium  : 2.0rem;
  @fs-large   : 3.4rem;

  @logo-width : 10rem;

  .guards();
}

.medium(@attr, @parameter) {
  @fs-small   : 1.4rem;
  @fs-medium  : 2.4rem;
  @fs-large   : 3.8rem;

  @logo-width : 12rem;

  .guards();
}

.large(@attr, @parameter) {
  @fs-small   : 1.4rem;
  @fs-medium  : 1.8rem;
  @fs-large   : 5rem;

  @logo-width : auto;
  .guards();
}

在上面的代码中，我调用.guards() 来渲染内容。这会检查我的守卫列表中是否有一个具有匹配属性的守卫，因为 LESS 不允许在 CSS 属性名称中使用变量。在这些守卫中，我动态调用了参数，这样如果我传递了fs-medium，就会渲染@fs-medium的值。

.guards() when (@attr = 'font-size') {
  font-size: @@parameter;
}
.guards() when (@attr = 'width') {
  width: @@parameter;
}

现在，正如我所说，这适用于中型和大型尺寸，所以我觉得我的代码中存在拼写错误（我已经检查过）或 LESS 中的错误。使用它的一段代码如下：

nav {
    .media('font-size', 'fs-medium');
}

呈现以下内容：

@media screen and (max-width: 799px){
    nav{ font-size:; }
}
@media screen and (min-width: 800px) and (max-width: 1299px){
    nav{ font-size:2.4rem; }
}
@media screen and (min-width: 1300px){
    nav{ font-size:1.8rem; }
}

为什么小字体不见了？

【问题讨论】：

标签： css less

【解决方案1】：

我发现我的问题确实有一个错字，我在.small mixin 下输入了“参数”。我已在原始帖子中对其进行了编辑，但我将其留在这里，以供其他人尝试以通用方式在 LESS 中使用媒体查询。

判断：错字。

【讨论】：