LESS 将参数传递给 mixins答案

【问题标题】：LESS passing arguments into mixinsLESS 将参数传递给 mixins
【发布时间】：2015-09-09 00:06:45
【问题描述】：

我对 LESS 有点陌生，所以我试图掌握如何将参数传递给 mixin，例如我有：

@delay: 6s;
.animation-delay (@delay) {
    -webkit-animation-delay: @delay;
    -moz-animation-delay: @delay;
    -o-animation-delay: @delay;
    -ms-animation-delay: @delay;
    animation-delay: @delay; 
}

稍后在我的样式表中，我想做这样的事情：

.slideshow li:nth-child(2) span { 
    background-image: url(/static/template/slides/slide-2.jpg)
    .animation-delay(@delay);   
}
.slideshow li:nth-child(3) span { 
    background-image: url(/static/template/slides/slide-3.jpg);
    .animation-delay (@delay + 6); 
}

当我从 less.js 收到错误时，我认为我做的不对！

【问题讨论】：

错误说明了什么？
ParseError：第 48 行第 2 列第 2 列的 slideshow.less 中无法识别的输入：47 背景图像：url(/static/template/slides/slide-2.jpg) 48 .animation-delay(@延迟）; 49}
现在好像可以工作了，一定是被缓存了
@DestinationDesigns：我得到了与您在 cmets 中提到的相同的错误，这是因为 background-image 声明 :nth-child(2) 后缺少分号 :)

标签： less

【解决方案1】：

Less 是一种动态样式表语言，可以编译成层叠样式表 (CSS) 并在客户端或服务器端运行。换句话说，它是一个将 javascript 代码编译成 CSS 规则的 CSS 预处理器。

每个CSS 代码都是有效的LESS 代码，反之则不然。

您不能期望 CSS 会识别 @delay 变量及其值。所有你想用 CSS 规则做的事情，你都可以在 .less 文件中完成。

【讨论】：