If statement 我可以少用'when'语句加伪元素的混音吗

我可以在when语句加伪元素时使用较少的mixin吗？ 我想创建一个Mixins。逻辑是如果原色是白色，那么我需要给出。userBadge:在第二种颜色之后

这是我的小混音，但似乎不起作用

    .property-style(@primary-bgcolor, @primary-color, @secondary-bgcolor, @secondary-color) {
        .wrapper {
            background-color: @primary-bgcolor;
        }
        .userBadge:after(@primary-color, @secondary-color) when (@primary-color = "#fff")   {
                background: @secondary-color;
        }  
    }

你能帮忙吗？非常感谢。

您有一些错误：

您缺少第二颜色前面的@ mixin类似于类.x，而不是任意选择器。x：：在。。。无效-您需要x。。。{&:：在{…}之后 您的.property样式mixin定义了一个mixin，但您从未调用该mixin 您的.userBadge mixin定义了一个mixin，但您从未调用过该mixin 在这种情况下，fff需要是不带引号的fff-否则您的颜色必须是fff而不是fff！：D 这里有一个你所拥有的工作版本，我省略了@secondary bgcolor，因为你没有用它做任何事情[]

.财产-style@primary-bgcolor、@原色、@副色{ //`.wrapper`样式 .包装纸{ 背景色：@原色； } //定义另一个mixin。注意，我们可以使用相同的变量名 //但它们是新的变量——我给它们起了新名字 //帮助我们记住，它们不会自动继承父mixin的值 .myOtherMixin@primary当@primary=fff时，@secondary{ 背景：@secondary } .userBadge:：之后{ .myOtherMixin@primary-颜色，@次颜色 } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 然而，嵌套混搭可能会变得相当混乱。这会更干净一点

.variableColor@color当@color=fff时，@otherColor{ 背景：@otherColor } .财产-style@primary-bgcolor、@原色、@副色{ .包装纸{ 背景色：@primary bgcolor } .userBadge:：之后{ .variableColor@primary-颜色，@次颜色 } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 或者如果可变颜色混合实际上不需要重复使用[]

.财产-style@primary-bgcolor、@原色、@副色{ .包装纸{ 背景色：@原色； } } .财产-style@primary-当@primary color=fff时，bgcolor、@primary color、@secondary color{ .userBadge:：之后{ 背景：@secondary color } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 但是等等，让我们后退。事实上，你没有调用你的mixin，至少在你提供的代码中是这样，这让我想知道整个事情是否真的需要在其中。如果你真的不需要这样做

.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}

这个更简单的解决方案依赖于

@原色：ccc； @原色：fff； @次要颜色：eee； .badgeBg@check：@primary color，@ifpasss:@secondary color当@primary color=fff时{ 背景：@secondary color } .包装纸{ 背景色：@primary bgcolor } .userBadge:：之后{ .徽章 } /* 结果: .wrapper{background:ccc；} .userBadge:：在{背景色：eee；}之后 */ 奖励：仅仅是踢，这里有一个不同的方法，你可以采取。对于你在这里展示的东西来说，这绝对是过分的，但是你可能会发现这是一件有趣的事情。它使用和，并使if中的颜色成为主题的动态部分。[]

.propertyValueCondition@property，@value，@check:pass，@guard:pass当@check=@guard时{ @{property}:@value } .theme@color1，@color2，@color3，@color4:fff{ .包装纸{ .propertyValue条件背景色，@color1 } .userBadge:：之后{ .propertyValueConditionbackground、@color3、@color2、@color4 } } .THEMECC、ddd、eee； 交替{ .ThemeBB，aaa，eee，aaa } /* 结果: .wrapper{背景色：ccc；} alternate.wrapper{背景色：bbb；} alternate.userBadge:：在{background:eee；}之后 */ 您有一些错误：

您缺少第二颜色前面的@ mixin类似于类.x，而不是任意选择器。x：：在。。。无效-您需要x。。。{&:：在{…}之后 您的.property样式mixin定义了一个mixin，但您从未调用该mixin 您的.userBadge mixin定义了一个mixin，但您从未调用过该mixin 在这种情况下，fff需要是不带引号的fff-否则您的颜色必须是fff而不是fff！：D 这里有一个你所拥有的工作版本，我省略了@secondary bgcolor，因为你没有用它做任何事情[]

.财产-style@primary-bgcolor、@原色、@副色{ //`.wrapper`样式 .包装纸{ 背景色：@原色； } //定义另一个mixin。请注意，我们可以使用相同的变量名 //但它们是新的变量——我给它们起了新名字 //帮助我们记住，它们不会自动继承父mixin的值 .myOtherMixin@primary当@primary=fff时，@secondary{ 背景：@secondary } .userBadge:：之后{ .myOtherMixin@primary-颜色，@次颜色 } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 然而，嵌套混搭可能会变得相当混乱。这会更干净一点

.variableColor@color当@color=fff时，@otherColor{ 背景：@otherColor } .财产-style@primary-bgcolor、@原色、@副色{ .包装纸{ 背景色：@primary bgcolor } .userBadge:：之后{ .variableColor@primary-颜色，@次颜色 } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 或者如果可变颜色混合实际上不需要重复使用[]

.财产-style@primary-bgcolor、@原色、@副色{ .包装纸{ 背景色：@原色； } } .财产-style@primary-当@primary color=fff时，bgcolor、@primary color、@secondary color{ .userBadge:：之后{ 背景：@secondary color } } .属性样式CCC、fff、eee；//结果: //.wrapper{background:ccc；} //.userBadge:：在{背景色：eee；}之后 但是等等，让我们后退。事实上，你没有调用你的mixin，至少在你提供的代码中是这样，这让我想知道整个事情是否真的需要在其中。如果你真的不需要这样做

.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}

这个更简单的解决方案依赖于

@原色：ccc； @原色：fff； @次要颜色：eee； .badgeBg@check：@primary color，@ifpasss:@secondary color当@primary color=fff时{ 背景：@secondary color } .包装纸{ 背景色：@primary bgcolor } .userBadge:：之后{ .徽章 } /* 结果: .wrapper{background:ccc；} .userBadge:：在{背景色：eee；}之后 */ 奖励：仅仅是踢，这里有一个不同的方法，你可以采取。对于你在这里展示的东西来说，这绝对是过分的，但是你可能会发现这是一件有趣的事情。它使用和，并使if中的颜色成为主题的动态部分。[]

.propertyValueCondition@property，@value，@check:pass，@guard:pass当@check=@guard时{ @{property}:@value } .theme@color1，@color2，@color3，@color4:fff{ .包装纸{ .propertyValue条件背景色，@color1 } .userBadge:：之后{ .propertyValueConditionbackground、@color3、@color2、@color4 } } .THEMECC、ddd、eee； 交替{ .ThemeBB，aaa，eee，aaa } /* 结果: .wrapper{背景色：ccc；} alternate.wrapper{背景色：bbb；} alternate.userBadge:：在{background:eee；}之后 */

---

亨利，非常感谢你的回答，它真的很有帮助，而且非常详细。奖金方法非常棒，你能告诉我@check:pass在这里是什么意思吗？我在网上搜索了一下，没有找到答案，再次感谢你。不客气，很高兴它帮了我的忙！这里的check、guard和pass是任意的。在@x:y中，y是@x的默认值，请遵循上面的默认值链接：。我之所以选择这些词，是因为在LESS中的when条件称为卫兵，我们正在对照卫兵检查真实的条件。因为防护在@check=@guard时通过，所以我选择让通过的值通过。更抽象的东西，比如…@x:1、@y:1，当@x=@y可以用同样的方法时，非常感谢你的回答，它真的很有用，而且非常详细。奖励方法非常棒，你能告诉我@check:pass在这里是什么意思吗？我在网上搜索了一下，没有找到答案，再次感谢你。不客气，很高兴它帮了我的忙！这里的check、guard和pass是任意的。在@x:y中，y是@x的默认值，请遵循上面的默认值链接：。我之所以选择这些词，是因为在LESS中的when条件称为卫兵，我们正在对照卫兵检查真实的条件。因为防护在@check=@guard时通过，所以我选择让通过的值通过。一些更抽象的东西，比如…@x:1、@y:1，当@x=@y时，它们也会起同样的作用