Question

这是我第一次使用LESS，并且我试图根据媒体查询来扩展一些元素。

所以我想我会为我做一个.scale混音。

.scale(@rules) {
    @scale-ratio: 1;
    @media screen and (min-width: (@page-width)) { @rules(); }
    @scale-ratio: 0.8;
    @media screen and (min-width: (@page-width * 0.6), max-width(@page-width - 1)) { @rules(); }
    @scale-ratio: 0.6;
    @media screen and (max-width: (@page-width * 0.6 - 1)) { @rules(); }
}

// Using like
header {
    .scale({
        width: @page-width * @scale-ratio;
    });
}

有什么方法可以让它发挥作用吗？或者通过另一种方法？我只是不想回到必须为每个媒体查询编写属性。

根据要求提供预期的输出：

@media screen and (min-width: 1280px) {
    header {
        width: 1280px;
    }
}
@media screen and (min-width: 768px, max-width: 1279px) {
    header {
        width: 1024px;
    }
}
@media screen and (max-width: 767px) {
    header {
        width: 768px;
    }
}

这个输入是预期的输出，但它只是一个剥离的例子。

Answer 1

变量的范围仅限于块（它们的行为类似于常量，顺序不会影响它们）。限制范围以便重新定义变量的一种方法是在&{}块中声明它们。

下面的mixin会生成您期望的CSS：

.scale(@rules) {
    &{
      @scale-ratio: 1;
      @media screen and (min-width: (@page-width)) { @rules(); }
    }
    &{
      @scale-ratio: 0.8;
      @min-width: (@page-width * 0.6);
      @max-width: (@page-width - 1);
      @media screen and (min-width: (@min-width), ~'max-width: @{max-width}') { @rules(); }
    }
    &{
      @scale-ratio: 0.6;
      @media screen and (max-width: (@page-width * 0.6 - 1)) { @rules(); }
    }
}

我必须将max-width部分放在撇号中，因为它导致错误（我不知道为什么）。

使用：

@page-width: 1280px;

结果是：

@media screen and (min-width: 1280px) {
  header {
    width: 1280px;
  }
}
@media screen and (min-width: 768px, max-width: 1279px) {
  header {
    width: 1024px;
  }
}
@media screen and (max-width: 767px) {
  header {
    width: 768px;
  }
}

在规则集中使用mixin中的变量

1 个答案: