.LESS代码的有效性

Question

我有一个.less文件，它有以这种方式编写的代码：

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

这段代码是什么意思？

Answer 1

在您的示例中，.button-toggle是mixin，在您的代码中的其他地方声明（可能是导入的Less文件）。声明可能类似于：

.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
 }

它接收几个variables作为参数，在调用mixin之前，也应该在的某处声明，如：

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

当你把它放在一个块中时，你正在调用 mixin，就像你一样，它将根据它的定义和你传递的参数生成CSS。

例如，如果你在你的代码块之前调用那些变量声明和我在上面的LESS编译器中包含的mixin声明，例如在线服务{{3你会得到这个CSS结果：

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