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并使用它来生成规则。在官方术语中，此类混合称为parameteric mixins。

请注意，参数mixins不会产生任何输出，除非从任何特定的选择器块中调用它们。也就是说，如果没有以下行，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}）仅用于动态（通过选择器插值）或在String中使用变量值时形成选择器的值。例如，如果您想使用循环，则下面的代码将动态地形成选择器。

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

会导致

.serial-1{
    color: #ffffff;
}

在LESS中创建带有参数的mixins

1 个答案: