1

我只是想知道，因为它今天出现在我们的项目中。实现mixin并使用@arguments或省略号捕获参数时似乎没有区别，在谷歌上也找不到任何有用的东西，所以我在这里问。

例子：

.transition(@arguments) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    transition: @arguments;
}

或者

.transition(...) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    transition: @arguments;
}

采用：

.transition(left 0.3s ease, top 0.3s ease);

这些实现中的任何一个都有什么优势吗？

4

2 回答 2

3

好像没有区别

实际上，您是否尝试编译您的代码？这些是完全不同的mixin：

// this is a mixin definition with a variable number of arguments
.a(...) {
    // here you use built-in @arguments variable
    a-value: @arguments;
}

// this is a mixin definition with a single argument
.b(@arguments) {
    // here you use a variable you've just declared in mixin's argument list
    // (and it's not the built-in @arguments!)
    b-value: @arguments;
}

test {
    .a(1, 2, 3); // OK
    .b(1, 2, 3); // Error
}

或者换句话说：

.a(@arguments) {
    a-value: @arguments;
}

等于：

.a(@x) {
    @arguments: @x; // defines a new variable that overrides the built-in one
    a-value: @arguments;
}

还有另一种声明变量参数列表的方法：.mixin(@whatever...). 基本上它是相同的，(...)但当你需要类似的东西时它很有用：

.c(@head, @tail...) {
    head: @head;
    tail: @tail;
}

test {
    .c(1, 2, 3, 4, 5)
}
于 2013-10-21T16:46:24.480 回答
3

这两者之间的唯一区别是transition(...)接受任意数量的参数，而transition(@arguments)只接受一个参数。

@arguments（在 mixin body中）包含所有传递的参数，并且不依赖于原始 mixins 参数，只要其中一个也没有被调用arguments。

在您的情况下，第一个 mixin 不会编译，因为您指定了一个参数，但传递了两个。为了将逗号分隔的列表作为一个参数传递给 mixin，请使用分号 ( ;) 作为分隔符：

.transition(left 0.3s ease, top 0.3s ease;);

如果你只传递一个参数，你的两个 mixin 基本上做同样的事情。

您可以在文档中阅读更多内容- 向下滚动一点以到达“@arguments变量”。

于 2013-10-21T16:47:54.160 回答