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）计算的最终值，所以为了避免这种情况，如果你需要调用它超过每个类块一次，你需要在该类中进入一些严格的mixin嵌套（＃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;
}

.less输出变量不声明

1 个答案:

最适合您的情况

输出变量