如何让除法和数学函数在更少的变量映射项上工作



我对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;
}

My own result (error):

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

我有javascript的知识,所以我得到的错误意味着什么。我不明白的是,对于我上面写的相同代码,讲师的代码编译得很好,而我的代码却不行。我试着浏览,但我没有得到任何答案,解决这个问题。老师用的是lessc 3.8.1版本,我用的是lessc 4.1.0版本。任何帮助都会非常感激。谢谢。

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

部门:

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

装天花板功能:

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

在github问题/线程中得到了这个特定评论的答案。

最新更新