less - .less 输出变量不声明

Question

我知道你可以在 SASS 中做到这一点

@pxtoem(@target, @context) {
 (@target/@context)+0em }

.something{
  font-size: @pxtoem(24, 16);
}

这可能在.less中吗？抱歉，我在这里的理解非常有限，但在我看来 .less 期望计算输出一个 css 声明？

为了清楚起见，我不想每次需要使用它时都使用 mixin（bg 位置、字体大小、行高等）

谢谢

Answer 1

是的，从 mixins 中，LESS 输出CSS 声明或变量，但不输出值。

最适合您的情况

获得所需内容的最简单方法是避免使用 mixin，而只使用普通操作和unit()函数：

.something {
    font-size: unit(24 / 16, em);
}

输出：

.something {
  font-size: 1.5em;
}

输出变量

可以输出一个变量，但它仍然可以使用 LESS 变量的正常范围和“常量”类型行为。所以考虑下面的代码。它表明使用一次，它工作正常（＃1），但两次只给出了为两个项目计算的最终值（＃2），所以为了避免这种情况，如果你需要在每个类块中多次调用它，你会需要在该类中进行一些严重的混合嵌套（#3）。

.divideToEm(@target, @context) {
   @divideToEm: (@target / @context) + 0em;
}

.something { /* #1 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
}

.somethingElse { /* #2 */
   .divideToEm(24, 16);
   font-size: @divideToEm;
   .divideToEm(12, 24);
   margin-right: @divideToEm;
}

.somethingElse2 { /* #3 */
   .setSize() {
   .divideToEm(24, 16);
    font-size: @divideToEm;
   }
   .setMargin() {
   .divideToEm(12, 24);
   margin-right: @divideToEm;
  }
  .setSize();
  .setMargin();
}

输出：

.something {
  font-size: 1.5em;
}
.somethingElse {
  font-size: 0.5em; /* <-- probably NOT expected */
  margin-right: 0.5em;
}
.somethingElse2 {
  font-size: 1.5em;
  margin-right: 0.5em;
}