在 LESS 中创建带有参数的 mixin答案

【问题标题】：creating mixins with arguments in LESS在 LESS 中创建带有参数的 mixin
【发布时间】：2015-02-15 21:55:53
【问题描述】：

我想创建一个 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};
}

这有可能吗？

【问题讨论】：

是的，可以创建参数化的 mixin。但是在我回答之前的一个问题，你是想将color1 传递给.serial mixin？
是的，我也想将颜色传递给 .serial 和 .circle，但总是不同的。
好的，.serial 和 .circle 应该总是一起调用吗？也就是说，是否存在只需要 .serial 而不需要 .circle 的案例/选择器？
不，他们一直在一起

标签： less less-mixins

【解决方案1】：

是的，可以将参数/参数发送到 mixin 并使用它来生成规则。在官方术语中，这样的 mixin 被称为parameteric 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}) 仅用于动态形成选择器的值（通过选择器插值）或当您想在字符串中使用变量值时。例如，如果你想使用循环，那么下面的代码将动态形成选择器。

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

会导致

.serial-1{
    color: #ffffff;
}

【讨论】：

谢谢，我知道我离解决方案不是很远 :)
嗨，Harry，我还有一个问题。我可以使用这样的条件句吗（这只是我脑海中的一个想法，但不确定它是否有效）： if bg-color lightness >= 50% —> light color else —> dark
@photoscene：是的，你绝对可以做到。我认为您正在寻找this answer 中讨论的contrast 函数。