如何让除法和数学函数以更少的时间处理可变地图项

问题描述

我对 less 比较陌生，我有这个 less 代码，我想将其编译为 css（特别是 .song 块）。我正在通过课程学习。

更少的代码：

<div class="jumbotron">
  <h1 class="display-4">Hello,world!</h1>
</div>

当我对数字进行除法时，它不会出错，但不能按预期工作。

教师 css 输出：

@breakpoints: {
  desktop: 989px;
  tablet: 767px;
  phone: 480px;
};


@media only screen and (min-width: @breakpoints[desktop]) {

  @minWidth: @breakpoints[desktop];

  .container {
    width: @minWidth;
  }

  /*Division*/
  .song {
    width: @breakpoints[desktop] / 3;
  }
  
  /*With ceil function*/
  .song {
    width: ceil(@breakpoints[desktop] / 3); 
  }
}

我自己的 css 输出：

.song {
    width: 329.66666667px;
 }

当我使用像 .song { width: 989px / 3; } 这样的数学函数时，它给出了一个错误：

教师 css 输出：

ceil

我自己的结果（错误）：

.song { width: 330px; }

我了解 javascript，所以我明白错误的含义。我不明白的是，对于我上面写的相同代码，教师的代码如何编译得很好，但我的却没有。我尝试浏览，但没有得到任何解决此问题的答案。讲师使用的是lessc 3.8.1版，我使用的是lessc 4.1.0版。任何帮助将不胜感激。谢谢。

解决方法

我已经能够通过在括号中插入表达式来使计算工作，如下所示：

部门：

.song {
  width: (@breakpoints[desktop] / 3);
}

Ceil 函数：

.song {
  width: ceil((@breakpoints[desktop] / 3)); 
}

在 github issue/thread 得到了来自 this particular comment 的答复。

frontend less