Question

编辑：已解决

我正在研究一种轻松编写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; }
}

为什么缺少小字体？

Answer 1

我发现在我的问题中确实有一个拼写错误，我在.small mixin下键入'paremeter'。我已经在原帖中对其进行了编辑，但是我将其留在这里，以便其他人尝试在LESS中以普遍的方式使用媒体查询。

判决：错字。

使用LESS的媒体查询中的嵌套混合中可能存在的错误

编辑：已解决

1 个答案: