css - 在规则集中使用来自 mixin 的变量

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

变量的范围仅限于 block (它们表现得像常量，顺序不影响它们)。限制范围以便重新定义变量的一种方法是在 &{} block 中声明它们。

下面的 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;
  }
}