Question

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

示例：

.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);

这两种实现都有任何优势吗？

Answer 1

似乎没有区别

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

// 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)
}

Answer 2

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

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

在你的情况下，第一个mixin将无法编译，因为你指定了一个参数，但是传递了两个参数。为了将逗号分隔列表作为一个参数传递给mixin，请使用分号（;）作为分隔符：

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

如果你只传递一个参数，你的两个mixin基本上都是一样的。

您可以阅读更多in the docs - 向下滚动一下以达到“@arguments变量”。

减：@arguments和省略号（...）之间有区别吗？

2 个答案: