如何让除法和数学函数以更少的方式处理变量地图项

Question

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

少代码：

@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;
 }

我自己的css输出：

.song {
    width: 989px / 3;
  }

当我使用像 ceil 这样的数学函数时，它给出了一个错误：

导师css输出：

.song {
    width: 330px;
 }

我自己的结果（错误）：

ArgumentError: Error evaluating function ceil: argument must be a number

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

Answer 1

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

除法：

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

天花板函数:

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

在 github issue/thread from this particular comment 得到答案。

如何让除法和数学函数以更少的方式处理变量地图项

How to get division and math function to work on variable map item(s) in less

css

frontend

less