less - 在 LESS 中创建带有参数的 mixin

Question

我想创建一个 mixin，这样我就不必总是输入相同的代码。我希望 mixin 接受参数。这是我必须一次又一次地写的部分（.serial 和 .circle 部分）：

.bg-primary { // LIGHTBLUE
    background-color: @fashionLightBlue;
    color: @fashionDarkBlue;
    .serial {
        color: @fashionPink;
    }
    .circle {
        background-color: @fashionWhite;
    }
}

我想创建这样的东西：

.CircleInfoBox (@color1, @background-color) {
    .serial {@color1};
    .circle {@background-color};
}

这有可能吗？

Answer 1

是的，可以将参数/参数发送到 mixin 并使用它来生成规则。在官方术语中，这样的混入被称为参数混入。

请注意，参数混合不会产生任何输出，除非它们是从任何特定的选择器块中调用的。也就是说，如果没有下面这行，mixin 的代码将永远不会出现在输出 CSS 中。函数的参数应始终在圆括号 ( ()) 内传递。

.CircleInfoBox(#FFF, #000);

较少的：

.bg-primary { // LIGHTBLUE
    background-color: @fashionLightBlue;
    color: @fashionDarkBlue;
    .CircleInfoBox(#FFF, #000); // mixin call
}

.CircleInfoBox (@color1, @background-color) { // the mixin
    .serial {
        color: @color1;
    }
    .circle {
        background-color: @background-color;
    }
}

额外：花括号 ( @{color1}) 仅用于动态形成选择器的值（通过选择器插值）或当您想在字符串中使用变量值时。例如，如果您想使用循环，那么下面的代码将动态形成选择器。

@count: 1;
.serial-@{count}{
    color: @color1;
}

会导致

.serial-1{
    color: #ffffff;
}