较少的CSS功能：使用不同的值

Question

有了LESS，我试图想出一个快速的方法来计算基于定义金额的边距，填充等。

目前，我正在指定：

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

并称之为：

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

输出1em的margin-top。但是，将.emSpacing（16）应用到margin-bottom不会有任何数学运算到达所需的2em。

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

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

当然，它不起作用。这些简单的线路上还有另一种解决方案吗？

Answer 1

您可以使用&选择器，只需将它放在那里两次。这将mixins拉入2个不同的范围，使它们不会相互冲突。它有点hacky而不是最干净的东西，但它确实有效，如下：

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

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

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

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

尽管它doesn't seem there's an alternative仍然不认为它超级干净。

修改

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

Less Plugin Functions

使用说明在自述文件中。