.LESS代码的有效性

我有一个.less文件，它的代码是这样写的：

.btn-form{
    .button-toggle( @brand-black; @brand-white; @btnform-color; @btnform-hover-color; @border-color);
}

---

这段代码是什么意思？

在您的示例中，

.button toggle

是一个，在代码的其他地方声明（可能是一个导入较少的文件）。声明可能类似于：

.button-toggle(@brand-black; @brand-white; @btnform-color; @btnform-hover-color; @border-color) {
    background: @btnform-color;
    color: @brand-black;
    &:hover {
        background: @btnform-hover-color;
        color: @brand-white;
    }
    border-color: @border-color;
    // other CSS properties or nested selectors
 }

它接收多个参数，在调用mixin之前也应该在某处声明这些参数，如：

@brand-black: black;
@brand-white: #fff;
@btnform-color: blue;
@btnform-hover-color: red;
@border-color: rgb(255,255,0);

当您将mixin放在块中时，您正在调用它，正如您所做的那样，它将根据其定义和您传递的参数生成CSS

例如，如果调用前面带有变量声明的代码块，以及上面我在较少的编译器（如在线服务）中包含的mixin声明，您将得到以下CSS结果：

.btn-form {
  background: #0000ff;
  color: #000000;
  border-color: #ffff00;
}
.btn-form:hover {
  background: #ff0000;
  color: #ffffff;
}

有关括号的使用和参数的说明，请参阅