css - 在 less 中只计算一个值

Question

在 less 中我可以创建一个将 px 转换为 em 并只返回值的函数

@em($target, $context: 16px) {
  @return ($target / $context) * 1rem;
}

这样我就可以像这样使用函数了

.body {
  font-size: em(22px);
  padding: 0 em(10px);
}

输出

.body {
  font-size: 1.375em;
  padding: 0 0.625em;
}

然而，在 less 中，我能看到的执行相同功能的唯一方法是将选择器也传递给函数

.em(@selector, @target, @context: 16px) {
  @{selector}: unit((@target / @context), em);
}

并且需要按照下面的方式使用

.body {
  .em(font-size: 22px);
}

哪个会输出

.body {
  font-size: 1.375em;
}

如果我有一个选择器和一个值，这种方法很好，但如上面的 Sass 示例所示，如果我需要一个带有 0 和 0.675em 的填充，那么我就不能使用 Less 函数来执行此操作。

有没有办法像 Sass 那样在 Less 中只从函数返回一个值，这样我就不必将选择器传递给函数？

Answer 1

简而言之，不，你不能在 Less 中定义“真正的”函数。所以对于特定的用例，最紧凑的方法是这样的:

@context: 16px;
@u: 1em / @context;

.body {
    font-size: 22 * @u;
    padding: 0 10 * @u;
}

或者这个:

@context: 16px;
@u: 1em / @context;

.body {
    font-size: @u * 22px;
    padding: 0 @u * 10px;
}

无论您发现哪个更具可读性(请注意，如果您使用 --strict-math=on 选项，算术表达式需要括号)。