LESS CSS 函数：使用不同的值

Question

使用 LESS，我试图想出一种快速的方法来根据定义的数量计算边距、填充等。

目前，我指定的是：

    .emSpacing(@string) {
        @emSpacing: unit(@string / 16) + 0em;
    }

并称它为：

    div {
        .emSpacing(16);
        margin-top: @emSpacing;
        margin-bottom: 2em;
    }

输出 1em 的 margin-top。但是，将 .emSpacing(16) 应用到边距底部将无法在没有一些数学运算的情况下达到所需的 2em。

理想情况下，我想做这样的事情：

    div {
        margin-top: @emSpacing(16);
        margin-bottom: @emSpacing(32);
    }

这当然行不通。在这些简单的线路上还有其他可行的解决方案吗？

Answer 1

您可以使用 & 选择器并将其放在那里两次。这将 mixins 拉入 2 个不同的范围，并防止它们相互冲突。它有点老套，看起来不是最干净的东西，但它确实有效，就像这样：

div {
  &{
    .emSpacing(16);
    margin-top: @emSpacing;
  }
  &{
    .emSpacing(32);
    margin-bottom: @emSpacing;
  }
}

这允许您使用与父级选择器相同的具有 2 个不同值的 mixin 两次。然后，您可以将要使用该值的所有属性分组到同一个块中。

您可以通过执行以下操作来清理单行使用的外观：

div {
  &{.emSpacing(16); margin-top: @emSpacing;}
  &{.emSpacing(32); margin-bottom: @emSpacing;}
}

但还是不认为它超级干净

看起来有一个插件可以为您提供所需的格式。

使用说明在自述文件中。

Answer 2

要达到 margin-bottom 的预期结果，请使用以下变通方法将 mixin 与一个值一起使用。

div {
        .emSpacing(16);
        margin-top: @emSpacing;
        margin-bottom: @emSpacing *2;
    }

请查看下面

编译的CSS

div {
  margin-top: 1em;
  margin-bottom: 2em;
}

LESS CSS Functions: Utilize Different Values